ลอง Next.js 14 แบบ Quick overview กัน
HTML-код
- Опубликовано: 25 июл 2024
- ☕️ สนับสนุนช่องเราด้วยการสมัครสมาชิกช่องทางนี้ได้เลย
/ @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
mikelopster.dev/posts/next-start
ใครมีข้อสงสัยเพิ่มเติม มาพูดคุยแลกเปลี่ยนความรู้กันได้ที่
Facebook page: / mikelopster.dev กันได้เลย
พิกัดของด้านหลัง : shope.ee/8A54c8cfkf
Enjoy ครับ 😘 
Наука
ช่องคุณภาพ❤ ผมดูมาเยอะ ให้ช่องนี้ที่1เลย เตรียมข้อมูลดีมาก พูดไม่ยืดเยื้อ มีแฝงอารมณ์ขัน เนื้อหาน่าสนใจ หลายๆคลิปผมดูไปชมไป สุดยอดจริงๆจากใจครับ
ขอบพระคุณที่เข้ามารับชมอย่างยิ่งเช่นกันครับ 😁
เห็นด้วยครับ
ค้นคว้าข้อมูลมาดีมาก สรุปได้ง่าย ชัดเจน ไม่เยิ่นเย้อ ขอบคุณความรู้ดีๆ
ขอบคุณครับ พูดเร็ว และ มีประโยชน์มากครับ ไม่ลีลา ติดตามแล้วครับ
เป็นช่องที่ดีและมีสาระมากครับ อยากให้ทำกลุ่มสำหรับพูดคุยด้วยครับ ขอบคุณครับ..
เป็นช่องที่ดูเเล้วต้องกดติดตาม คุณภาพมากครับ
เป็นช่องที่อธิบายดี ละเอียด และสนุกมากๆครับ ทำอีกเยอะๆนะครับ
ขอบคุณครับ อธิบายกระชับ เข้าใจง่ายมากครับ
เป็นช่องที่ฟังเพลินมากเลยครับ สอนเข้าใจง่ายได้ใจความดีมากเลยครับ
สรุปเนื้อหาดีมากครับ กระชับ เนื้อเน้นๆ ฟังไม่ง่วงด้วย ดีมากครับ
เยี่ยมจริงๆ เนื้อหาดีมากครับ
ถึงแม้ว่าพูดเร็วไปหน่อย
ก็ได้ความรู้เต็มอิ่มจุก ๆ เลยครับ
ขอบคุณครับ
เนื้อหาดีมากครับ ขอบคุณสำหรับความรู้
เนื้อหาดีมากเลยครับ อิ่มๆเลย :)
อธิบายดีมากๆ สนุกด้วยครับ
ชอบมากเลยคับ อธิบายสนุกมาก
ช่องอะไรคับเนี้ยยยย ดีโคตรรรร แน่น กระชับ ได้ใจความสุด ขอบคุณครับมีประโยชน์มากๆ
ชอบมากครับ อธิบายได้กระชับและฟังง่ายฟังเพลินดีคับ👍
ชอบมากครับ บันเทิงดี ยิ่งดู x1.5-x2 ยิ่งมัน ขอบคุณมากๆ นะครับ
คุณเป็นคนแรกเลยนะ ที่ดูความเร็วใกล้เคียงกับคนตัดต่อ 😆
ของไทยเราได้แค่1.5x อีกหูนึงฟังคลับเฮ้า แต่ถ้าคลิปฝรั่ง2x ดูเอาhint +คลับเฮ้า
อธิบายดีมากเข้าใจง่ายจัดๆ อยากเห็นทำเรื่อง DevOps หรือ DevSecOps เลยครับ ปล.แอบชอบความแมวในทุกองประกอบมากน่ารัก~~~~~
ขอบคุณครับ ได้ความรู้มากๆ
ทำไมเพิ่งมาเจอช่องนี้ !!!!!
กราบงามๆเลยครับ อธิบายมันส์มาก และความรู้เนื้อๆทั้งนั้น ช่องคุณภาพของจริง 👍👍
ขอบคุณที่ชื่นชอบนะครับ
อธิบายดีงามมากครับ
ขอบคุณมากกกครับ อาจารย์😮😮😮😮😮😮😮😮
อธิบายละเอียดมากครับ ใช้มา6เดือนพึ่งรู้ว่า layout ใช้ให้ถูกวิธียังไง😂
มาเเล้ววว❤
อิอิ รอมานานแว้ววว
โึครตเด็ด!! จากใจ กระชับได้ใจความ สมอง ทำงานไม่มีพัก 😂!!!
สุดยอดครับ
ขอให้ทำเนื้อหาของ NextJS ออกมาเรื่อยๆ เยอะๆ นะครับ ถือว่าเป็นภาษาที่ดีและน่าจะเป็นที่นิยมอย่างมากแน่นอนครับ
ของดี ขอบคุณมากครับ
เยี่ยมมากคั
พัฒนาร่วมกับ
Authentication : NextAuth
Ui : Shadcn/ui + RadixUi
Validation form : react hook form + zod
หน่อยครับ
กระจ่างมาก ขอบคุณครับ
ขอบคุณครับ รักษาสุขภาพด้วยนะครับ
🥰🥰
ขอบคุณมากนะครับ 😁
ผมซึ่งกำลังงม อยู่กับตัว Server เพื่อใช้รัน Next.js :)
ขอคำแนะนำหน่อยครับระหว่างทำnext.js ทั้ง font-back กับการทำ next.js font และ ใช้ nest.jsหรืออื่นๆเป็น back แบบไหนดีกว่า และมันเหมาะกับงานแบบไหนของการทำแต่ละแบบ
ขอบคุณครับ ผมเริ่มจาก 0 ดูคลิปนี้วนๆไม่รู้กี่รอบ ตอนนี้ขึ้นโปรเจคได้และขายงานได้ภายใน 2 เดือน ขอบคุณสำหรับความรู้ครับ 🙏
แจ๋ว ได้ยินแบบนี้ชื่นใจครับ 😆
@@mikelopster 😍😍😍
ชอบนะครับ พูดจาฉะฉาน เหมือน เมาท์มทอยในวง สนทนาดี 555
คุณภาพมากครับ
อยากได้ลงลึกของ nextjs อีกครับ ขอบคุณมากครับบ
อยากได้หัวข้อไหนของ next.js เป็นพิเศษไหมครับ 😁
อธิบายเรื่องยาวๆให้เข้าใจง่ายๆได้ดีมากเลยครับชื่นชม✌
ไม่ทำให้ผิดหวังจริงๆค้าบ
สุดยอดมากครับ เนื้อหาแน่นกระชับ ตอนจบแอบอยากได้ build เป็น docker images ไปใช้งาน ว่าต้อง build แยกไหม client, server ถ้ามีโอกาสได้ขึ้นโปรเจคใหม่ next.js แน่นอนครับ
เดี๋ยวไว้ผมอาจจะหยิบมาเล่าน้า แต่พูดแบบเร็วๆมันคือ image nodejs นั่นแหละ เพียงแต่
- ถ้า ไม่แยก client กับ server = image nodejs อันเดียว ใช้ร่วมกัน (เป็น SSR ร่วมกัน)
- ถ้า แยก client กับ server = build เป็น 2 image ส่วนฝั่งของ client ก็อาจจะใช้เพียง nginx ในการ run หน้าเว็บออกมาได้
สอนดีมากครับ รบกวนสอนการใช้ daisyui หน่อยครับ
daisyui ลองดูพื้นฐานการใช้งานจากคลิปนี้ก่อนได้น้า อันนี้เป็นฉบับ Vue ก็จริง แต่วิธีใช้งานไม่ต่างกันนะครับ 😁
ruclips.net/video/1VC8ps7EI18/видео.html
พี่ไมค์ๆทำเป็น fullstack ซีรีย์แบบเดียวกับ vue firebase master classหน่อยครับ หลังจบ go ก็ได้นะครับไมติด😂😂เอาจริงๆผมชอบซีรีย์เรียนวันเสาร์พี่มากนะครับทำต่อไปนะครับผมจะได้มีprojectเข้าportfolioเพิ่ม
ok เดี๋ยวพี่ขอหาไอเดียก่อน 😂
โครตดีครับ ทั้งจังหวะการอธิบาย หรือ example เป็น 1 ชั่วโมงที่ลื่นสุดๆ
บอกแล้ว next อ่ะของดี 😁
ขอคอนเทนต์ graphql หน่อยครับ
อยากให้พี่ทำคลิปแบบ การเริ่มต้นในการมาสาย dev ของพี่ด้วย อยาดฟังประสบการณ์และแนวทางในการเรียนด้วย❤
มีโอกาสมาเล่าสู่กันฟังแน่นอน 😁
พัฒนาร่วมกับใช้ Ant Design หน่อยครับ
น่าสนใจ ผมยังไม่เคยลองนะ เดี๋ยวขอลองไปเล่นก่อนนะครับ 😁
เย้ๆ
ดูจบเเล้วครับรอมานานมากครับ ดูตั้งเเต่คริปแรกๆ ดู vue ยังไม่จบครับ react มา next มาต้องดู next ให้จบเเล้วครับชอบช่องนี้มากๆ ครับ รอดูอยู่ครับบ😅😅😅
และที่สำคัญคือชอบปกคริปสุดๆ5555 แมวทุกคริปป
กว่าจะ prompt ได้แต่ละรอบ บางทีก็ไม่ใช่เรื่องง่าย 😂
@@mikelopster รอชมทุกคริปครับบบ (รอดูแมว5555)😄😄😄
รอซีรีส์ยาวว❤ //รอบหน้าขอลองเพิ่ม dead air ให้หน่อยได้มั้ยครับ คัทชนแบบปัจจุบันนี้ ผมว่ามันไวไปไปนี๊ดนึงง หรืออยากให้เพิ่มจังหวะเว้นให้คิดตามหรือเขียนตามได้นิดหน่อยอะไรงี้อะครับ แต่ที่เหลือคือ the best!!
ขอบคุณมากนะครับบ เดี๋ยวผมรับไว้พิจารณาน้า 😁
@@mikelopster ชื่นชมงับ เดี๋ยวต้นเดือนมาซับรายเดือนให้เพิ่มครับ
@@Arona-nm8hl ขอบคุณที่สนับสนุนกันมากๆเลยนะครับ 🙏
ปกติ next จะ โลหดจาก server ทุก page แล้วส่งไปที่ client หรือว่า จะโหลด เฉพาะ page ที่ request อะครับ ขอบคุณครับ ผมติดตามพี่แทบทุกคลิปเลยครับ
ปกติหลักการของ Next คือ
- ถ้า page เป็น Server component = load จาก server ก่อนแล้วไป client
- ถ้า page เป็น Client component = เปิด component มาอย่างเดียว (เหมือนเปิด React)
ซึ่งปกติ default ของทุกหน้าของ Next เป็น Server component อยู่แล้ว ดังนั้นมันเลยจะโหลดจาก server ก่อนทุก page เสมอนะครับ (ถ้าไม่ได้มีการปรับหน้านั้นเป็น Client component เพื่อใช้ร่วมกับ State นะครับ)
และแล้วก็เข้าร่วมเป็นหนึ่งใน React community ซะแล้ววว
ผมอุทิศหัวใจดวงเดียวให้ React เสมอ 😂
ภาพปกคลิปแมวสวยจังครับ แบ่งปันหน่อยได้มั้ยครับ จากใจทาสแมวคนหนึ่ง555
แมวทุกตัว เกิดจากการใช้ ChatGPT 4 generate ภาพหมดเลยย 😂 แนะนำถ้าอยากได้ทรงๆนี้ให้เพิ่ม "anime cat" ลงใน prompt ที่สร้างภาพขึ้นมาครับ แล้วใส่รายละเอียดลงไป จะได้ภาพทรงๆนี้ออกมาได้ครับ
อยากจะรู้ว่า use sever มันรัน ffmpeg ได้ไหม
ผมไม่เคยใช้โดยตรงน้า แต่ที่อ่านมา เหมือนจะ support node.js ถ้า support ตัวนั้นได้ ก็สามารถทำงานได้ไม่มีปัญหาอะไรนะครับ
อธิบายการทำ microservice ด้วยได้ไหมครับ พร้อมตัวอย่าง 😅
หัวข้อ microservice มีโอกาสได้แวะเวียนมาทำแน่นอนครับ 😁
ขึ้น error ตรงทำหน้า actiion login ครับ
key for the H 256 algorithm must be one of type KeyObject
แชร์จุด code ที่มีปัญหาเพิ่มเติมได้นะครับ
ดูมาหลายคนมากๆ แต่คนนี้คือที่สุดจริงๆทั้งน้ำเสียง ท่าทางการอธิบาย เหมือน 9arm เลย แต่ดูเรียบง่ายกว่า
ขอบคุณมากครับ 9arm นี่ช่องโปรดผมเลย 😂
หลังจากขึ้นเรื่องใหม่ใน next ผมก็ตามฟังประมวลผลไม่ทันเลยครับ หลุดเป็นพักๆช่วง ตั้งแต่นาที 35เป็นต้นไปต้องปรับลดความไว้ลงแล้วเข้าใจไว้ขึ้นมากครับ
รอบหน้าอยากพูดดึง framwork nest ได้ไหมครับ 5555555 ขอบคุณครับผม
ขอบคุณที่ดูจนจบเช่นกันนะครับ ผมจะขอรับ nest ไว้ในอ้อมอกอ้อมใจนะครับ 😆
สอนดีมากเลยครับ แต่พอดีผมเขียนแบบ typescript เหมือนผมจะติดตรงเวลามีการ set cookies แล้วจะมีอาการ input field หน้า login มัน clear เองทั้ง email และ password ครั้งแรกที่ใส่ค่าถูกต้อง และตรง message ก็ได้ state ' ' ผมต้องตรวจสอบตรงไหนเพิ่มเติมหรอครับ ถ้าไม่ set cookies อาการนี้ไม่เกิดขึ้นเลยขึ้น login success
น่าจะเกี่ยวกับ state น้า ลอง recheck code ส่วนของ state ดู ปกติ ไม่ว่าจะเป็น js หรือ ts action การทำงานมันจะเหมือนกันเป๊ะๆเลย แค่ ts มี type มากำกับน้า
@@mikelopster โอ้ววขอบคุณครับเดะผมจะลองไปเช็คดู
เป็นการสอนที่ใกล้เคียงกับใช้งานจริงที่สุด!!!
ระหว่าง next.js กับ angular อันใหนดีคะ
ดีทั้งคู่น้า ขึ้นอยู่กับเราถนัด แต่ Next.js ก็จะได้เปรียบตรงที่เป็น Fullstack framework ในขณะที่ Angular จะเป็นเพียง Frontend framework ที่จะต้องหาส่วน Backend มาเพิ่มเติมนะครับ
32:14 กำลังสงสัยว่า Server Component อยู่ฝั่ง server ทำไมถึงใช้ fetch ได้ ทั้งๆที่ fetch เป็นคำสั่งที่ทำงานฝั่ง client
คำสั่ง fetch ใช้ได้ทั้ง Server และ Client น้า เป็นมาตรฐานคำสั่งของ javascript ที่ใช้ได้ทั้ง 2 ฝั่งในการยิง request ออกไปด้านนอกนะครับ
ขอ nextjs ที่เป็น best pactice ทีครับ พวกระบบที่ คนส่วนไหญ่จะต้องทำแน่ๆ เช่น CRUD, authenticate
จริงๆ พวกนี้ไม่มี best practice น้า แต่ถ้าเป็นเคสพวกใช้ร่วมกับ authenticate เดี๋ยวอาจจะหยิบมาขยี้เพิ่มเติมนะครับ 😁
สวัสดีครับ คุณไม้
👍👍👍👍👍
content นี้ทำให้ผมกด join
🥳🥳🥳🥳🥳🥳
เพิ่งสังเกตว่า เป็น .js ไม่ใช่ .jsx แต่พอเป็น ts มันด่ายับเลย 🥹
ถ้าคิดจะเข้าโลก ts ละก็ คุณต้องเตรียมเจอกับสงครามนะ 😆
Next เดี๋ยวนี้ Powerful กว่าสมัยตอนเล่นเมื่อก่อนเยอะเลยแฮะ 0w0! (สมัยก่อนที่ว่า....น่าจะก่อนโควิดสักปีสองปีนี่แหละมั้ง ?)
ใช่แล้ว ผมลองตอน Next 12 มา พอมาอัพเดทตัวเองเป็น Next 14 ก็ว้าวหลายอย่างเหมือนกัน รู้สึกอยากลองเอามาพัฒนาจริงเลย 😁
ยกให้เป็นเนื้อหาที่โครตรดีสำหรับ Next.js ที่ได้เรียนรู้ในปีนี้เลยครับ
คอร์สที่ลอยคอ
รอคอย แฮร่!
พาฝึกแก้โค้ด javascript ใน leetcode หน่อยครับ
สนใจสอน spring boot ต่อไหมครับ 5555
ผมขอเก็บไว้เป็นไอเดียก่อนน้า 😁
ตอนเปิดคลิปมานึกว่ามือถือจอพัง ตรงขอบจอด้านล่างไมค์อ่ะ😅
ตัดพลาดไปนิสส 😂
buy you a coffee
ขอบพระคุณสำหรับการสนับสนุนครั้งนี้มากนะครับ 😁
ผมฟังไม่ค่อยทัน😅
มีประเด็นไหนอยากให้ขยี้เป็นพิเศษไหมครับ 😁
ไม่เข้าใจตรง client component กับ sever component ครับ
ผมเข้าใจถูกมั้ยว่า ใน 1 page มีได้หลาย component
สมมุติว่า ใน page นั้นมี sever component เป็น parent component แล้วมี client component เป็น child component ใน page นั้นจะเป็น csr หรือ ssr ครับ
แล้วถ้ากลับกันถ้า client component เป็น parent component แล้วมี server component เป็น child จะเป็น csr หรือ ssrครับ 😂😂😂งงมาก
ok อธิบายเพิ่มเติม 2 เคสนะครับ
1. ถ้า Server component เป็น parent ของ Client component = เป็นการเรียกใช้ Component แบบ SSR ทั่วไป (จุดเริ่มต้นจะเปิดจาก Server ก่อนถึงจะไปสู่ Browser) โดยจังหวะที่เปิดขึ้นมา Server ก็จะทำการ render component ทั้ง component ตัวเองและ Client component ออกมา และหลังจากนั้น Client component ก็จะไปทำงานต่อเองหลังจาก render มาแล้ว (ให้นึกถึงหน้าเว็บที่มี html, css, javascript แยกเป็นของตัวเอง แล้วเราไปดึงมาใช้ Client component จะเป็นแบบนั้นแหละครับ)
2. ถ้า Client component เป็น parent ของ Server component = ไม่สามารถทำได้ เนื่องจาก Server component มีคำสั่งจัดการจากฝั่งของ Server แต่จุดเริ่มต้นของ Client component คือ Browser (Browser > Server) จึงไม่สามารถทำเคสนี้ได้ เพราะ Browser ไม่สามารถใช้คำสั่งบน Server ได้
** ยกเว้นแต่ Server Action ที่มีวิธีการใช้ร่วมกันในฝั่ง Client Component นะครับ (แต่กรณี Server Action ให้มองง่ายๆเหมือน Client Component ยิง API ปกติครับ มันเลยจะยังคงเป็น CSR เหมือนเดิมนะครับ)
@@mikelopster ขอบคุณครับ
ปรับความเร็ว 0.75 คือเหมาะสำหรับมืิอใหม่ที่สุดครับ 55555 สมองรันตามไม่ทัน
อาจารครับขอ nest angularด้วยครับ