ลอง Next.js 14 แบบ Quick overview กัน

☕️ สนับสนุนช่องเราด้วยการสมัครสมาชิกช่องทางนี้ได้เลย
   / @mikelopster  

ลองไมค์ สัปดาห์นี้มาต่อกันที่ Next.js Library ที่เพิ่มความสามารถของ React จาก Frontend Framework ให้เป็น Fullstack Framework ได้ !

เนื้อหาในหัวข้อนี้เราจะมาเล่า feature หลักๆของ Next.js 14 กัน ว่าสามารถทำอะไรได้บ้าง และมี feature อะไรน่าสนใจบ้าง โดยเนื้อหาจะประกอบด้วย

1. App Router ตัวสำหรับจัดการ route default ตัวใหม่ของ Next.js 14
2. Rendering ความแตกต่างระหว่าง Server component และ Client component ว่ามีความแตกต่างกันยังไงบ้าง และใช้ในจุดประสงค์ต่างกันยังไงบ้าง
3. Data fetching การดึงข้อมูลภายใน Next.js มีการจัดการ flow data ผ่าน API ยังไงบ้าง และการดึง data แบบ Streaming ว่ามีไอเดียในการจัดการประมาณไหนบ้าง เพื่อให้ การ Render ออกมามีประสิทธิภาพที่สุด
4. Server action feature สุดตึงที่เป็นกาวประสานระหว่าง Client และ Server อย่าง seamless ผ่าน form action เพื่อให้สามารถจัดการ Form ผ่าน Server ได้โดยไม่จำเป็นต้องสร้าง API เพิ่ม

ขอย้ำ 1 อย่าง หากใครยังไม่ได้ดู React 18 (คลิปก่อนหน้านี้) โปรดรับชมก่อน เพื่ออรรถรสที่มากขึ้นนะครับ ในนี้เราจะพูดกันส่วน Next.js ล้วนๆไม่มีวัวผสมนะครับ ซึ่งจะใช้พื้นฐาน React มาคู่กันด้วย

หากพร้อมลุยกันแล้ว มาลุยแบบติด speed ต่อกับ Next.js กันครับ 😆

หัวข้อ
00:00 แนะนำ Session
02:04 แนะนำ Next.js มี feature อะไรบ้าง
04:58 Start Next.js project
06:54 Structure ใน Next.js
07:45 การจัดการ Router ผ่าน App Router
08:43 App Router - page.js สำหรับจัดการแต่ละหน้า
10:16 App Router - layout.js สำหรับแสดง Layout รวมของ Page
13:22 App Router - parameter ใน url
15:57 Route Handler - ทำ api บน Next.js
20:36 แนะนำ Middleware
24:16 Rendering - แนะนำ Server / Client component
28:53 ดึง Data ผ่าน API ใน Server component
33:31 ดึง Data ผ่าน API ใน Client component
37:28 ความแตกต่างระหว่าง Client / Server component ตอน First load
39:04 แนะนำการ Fetch Data แบบ Streaming
43:43 แนะนำ Server action
48:07 เริ่มต้นทำโจทย์กันว่าจะทำอะไรกันบ้าง
49:16 /blog - เริ่มดึง Blog และแสดง Blog รายหน้า
53:01 /login - เพิ่มหน้า Login สำหรับ auth และ save cookie
59:46 เพิ่ม middleware สำหรับเช็ค cookie เพื่อกั้นสิทธิ์
1:03:26 แนบ user data ผ่าน Header (จาก JWT) ผ่าน middleware
1:05:33 เพิ่มหน้าแก้ไขชื่อ Blog (Client component)
1:09:30 สรุปทั้งหมดเราทำอะไรไปบ้าง

ฉบับ Document
https://mikelopster.dev/posts/next-start

ใครมีข้อสงสัยเพิ่มเติม มาพูดคุยแลกเปลี่ยนความรู้กันได้ที่
Facebook page:   / mikelopster.dev   กันได้เลย

พิกัดของด้านหลัง : https://shope.ee/8A54c8cfkf

Enjoy ครับ 😘