![Babel Coder
Babel Coder
https://www.babelcoder.com
PATHS
app
globals.css
layout.tsx
page.tsx
ไฟล์ตั้งค่า global CSS
ไฟล์ตั้งค่า Layout หลัก
คอมโพแนนท์สำหรับ /
products
page.tsx
[id]
page.tsx
layout.tsx
คอมโพแนนท์สำหรับ /products
คอมโพแนนท์สำหรับ /products/:id เช่น /products/1](https://image.slidesharecdn.com/next-240620081737-0724a9c1/85/Next-js-web-development-pdfNext-js-web-development-pdfNext-js-web-development-pdfNext-js-web-development-pdf-20-320.jpg)
![Babel Coder
Babel Coder
https://www.babelcoder.com
LAYOUT
app
globals.css
layout.tsx
page.tsx
products
page.tsx
[id]
page.tsx
layout.tsx](https://image.slidesharecdn.com/next-240620081737-0724a9c1/85/Next-js-web-development-pdfNext-js-web-development-pdfNext-js-web-development-pdfNext-js-web-development-pdf-21-320.jpg)
![Babel Coder
Babel Coder
https://www.babelcoder.com
page.tsx
PARAMS
app
globals.css
layout.tsx
page.tsx
products
page.tsx
[id]
layout.tsx](https://image.slidesharecdn.com/next-240620081737-0724a9c1/85/Next-js-web-development-pdfNext-js-web-development-pdfNext-js-web-development-pdfNext-js-web-development-pdf-22-320.jpg)
![Babel Coder
Babel Coder
https://www.babelcoder.com
All Products
Product 1
INTERCEPTING ROUTES
[id]
page.tsx
app
products
page.tsx
(..)[id]
page.tsx](https://image.slidesharecdn.com/next-240620081737-0724a9c1/85/Next-js-web-development-pdfNext-js-web-development-pdfNext-js-web-development-pdfNext-js-web-development-pdf-30-320.jpg)
![Babel Coder
Babel Coder
https://www.babelcoder.com
LIFE CYCLE
useEffect(() => {
return () => {
}
}, [deps])
ฟังก์ชันนี้จะถูกเรียกทุกครั้งที่เข้าสู่สถานะ
Mounted หรือ Updated
ฟังก์ชันนี้เรียกว่า cleanup function
จะถูกเรียกก่อนคอมโพแนนท์จะสิ้นสุดการ
ทำงาน หรือเมื่อ state หรือ props ใน
deps เปลี่ยนแปลง cleanup function
จะถูกเรียกก่อน ก่อนจะเข้าสู่สถานะ
undated](https://image.slidesharecdn.com/next-240620081737-0724a9c1/85/Next-js-web-development-pdfNext-js-web-development-pdfNext-js-web-development-pdfNext-js-web-development-pdf-36-320.jpg)
![Babel Coder
Babel Coder
https://www.babelcoder.com
LIFE CYCLE
useEffect(() => {
return () => {
}
}, [])
ฟังก์ชัน จะทำงานแค่ครั้งเดียวเมื่อ
คอมโพแนนท์เข้าสู่สถานะ Mounted หรือ
render แล้วบนเว็บเบราว์เซอร์](https://image.slidesharecdn.com/next-240620081737-0724a9c1/85/Next-js-web-development-pdfNext-js-web-development-pdfNext-js-web-development-pdfNext-js-web-development-pdf-37-320.jpg)
![Babel Coder
Babel Coder
https://www.babelcoder.com
LIFE CYCLE
useEffect(() => {
return () => {
}
}, [a, b])
เมื่อเข้าสู่สถานะ Mounted ฟังก์ชัน
จะได้รับการทำงาน
1.
เมื่อ a หรือ b เปลี่ยนแปลงค่าฟังก์ชัน
จะถูกเรียกเพื่อเป็นการ cleanup
2.
คอมโพแนนท์จะทำการอัพเดทการ
เปลี่ยนแปลงใหม่ไปยัง DOM
3.
คอมโพแนนท์เข้าสู่สถานะ
Unmounted และฟังก์ชัน จะได้
รับการเรียกอีกครั้ง
4.](https://image.slidesharecdn.com/next-240620081737-0724a9c1/85/Next-js-web-development-pdfNext-js-web-development-pdfNext-js-web-development-pdfNext-js-web-development-pdf-38-320.jpg)
![Babel Coder
Babel Coder
https://www.babelcoder.com
pnpm build
STATIC SITE GENERATION
app
products
[id]
page.tsx
.next
server
app
products
1.html
2.html](https://image.slidesharecdn.com/next-240620081737-0724a9c1/85/Next-js-web-development-pdfNext-js-web-development-pdfNext-js-web-development-pdfNext-js-web-development-pdf-54-320.jpg)
Next.js web development.pdfNext.js web development.pdfNext.js web development.pdfNext.js web development.pdf
- 2. COMPONENTS Babel Coder https://www.babelcoder.com
- 3. Babel Coder Babel Coder https://www.babelcoder.com Page COMPONENTS Header ProductList ProductItem ProductItem
- 4. Babel Coder Babel Coder https://www.babelcoder.com COMPONENTS Product 1 Product 2
- 5. Babel Coder Babel Coder https://www.babelcoder.com JSX / TSX Syntax ที่ใช้ในการสร้างคอมโพแนนท์เรียกว่า JSX / TSX ที่เป็นการรวมระหว่างรูปแบบของ JavaScript และ XML ดังนั้น Syntax ที่เขียนต้องถูกต้องทั้งส่วนของ JavaScript และ XML กรณีมีหลายแท็กในระดับเดียวกันต้องมี Parant Tag ต้องมีแท็กปิดเสมอหรือ self closed tag เช่น <br /> ใช้ className แทน class เพราะ class เป็นคียเวิร์ด ใน JavaScript ใช้ interpolation ในแท็ก
- 11. Babel Coder Babel Coder https://www.babelcoder.com COMPONENTS Each child in a list should have a unique “key” prop
- 12. Babel Coder Babel Coder https://www.babelcoder.com A RECONCILIATION B C D A B C D E Old VDom New VDom A B C D E A B C D New Dom Old Dom
- 13. Babel Coder Babel Coder https://www.babelcoder.com A RECONCILIATION B C D A B C D E Old VDom New VDom A B C D E A B C D New Dom Old Dom
- 14. Babel Coder Babel Coder https://www.babelcoder.com A B C D A B C D E A B C D E A B C D x1g RECONCILIATION Old VDom New VDom New Dom Old Dom bd1 yyr x64 x1g bd1 yyr x64 m1
- 16. Babel Coder Babel Coder https://www.babelcoder.com FRAGMENT กรณีที่ต้องมี Parent Tag เพียงเพื่อให้ถูกต้องตามไวยากรณ์ของ JSX เราสามารถใช้ Fragment แทนได้
- 18. APP ROUTER Babel Coder https://www.babelcoder.com
- 19. Babel Coder Babel Coder https://www.babelcoder.com DIRECTORY app next.config.mjs globals.css layout.tsx page.tsx ไฟล์ตั้งค่า global CSS ไฟล์ตั้งค่าการทำงานของ Next ไฟล์ตั้งค่า Layout หลัก คอมโพแนนท์สำหรับ /
- 20. Babel Coder Babel Coder https://www.babelcoder.com PATHS app globals.css layout.tsx page.tsx ไฟล์ตั้งค่า global CSS ไฟล์ตั้งค่า Layout หลัก คอมโพแนนท์สำหรับ / products page.tsx [id] page.tsx layout.tsx คอมโพแนนท์สำหรับ /products คอมโพแนนท์สำหรับ /products/:id เช่น /products/1
- 24. Babel Coder Babel Coder https://www.babelcoder.com REACT SERVER COMPONENTS Compile ค่าเริ่มต้นสำหรับคอมโพแนนท์ในโฟลเดอร์ app คือ React Server Component (RSC)
- 25. Babel Coder Babel Coder https://www.babelcoder.com CLIENT COMPONENTS Compile Client Components ไม่สามารถเป็น Async Functions ได้
- 26. Babel Coder Babel Coder https://www.babelcoder.com ROUTE GROUPS page.tsx app admin page.tsx articles layout.tsx page.tsx users page.tsx (site) page.tsx articles layout.tsx page.tsx users layout.tsx คอมโพแนนท์สำหรับ /articles คอมโพแนนท์สำหรับ /users คอมโพแนนท์สำหรับ /admin/articles คอมโพแนนท์สำหรับ /admin/users Layout สำหรับ admin Layout สำหรับ (site) Root Layout สำหรับ (site) และ admin
- 27. Babel Coder Babel Coder https://www.babelcoder.com 20% 20% 20% 20% 20% Latest Users Latest Products @articles @users PARALLEL ROUTES page.tsx app admin page.tsx layout.tsx page.tsx
- 28. Babel Coder Babel Coder https://www.babelcoder.com INTERCEPTING ROUTES All Products Product 1 <Link href=”/products/1"> Product 1 </Link> /products /products/:id
- 29. Babel Coder Babel Coder https://www.babelcoder.com INTERCEPTING ROUTES All Products All Products <Link href=”/products/1"> Product 1 </Link> /products /products/:id Product 1
- 30. Babel Coder Babel Coder https://www.babelcoder.com All Products Product 1 INTERCEPTING ROUTES [id] page.tsx app products page.tsx (..)[id] page.tsx
- 31. Babel Coder Babel Coder https://www.babelcoder.com Login page.tsx sign-in page.tsx Login Email Password Login INTERCEPTING ROUTES app products page.tsx (..)auth sign-in articles page.tsx (..)auth auth sign-in page.tsx Login
- 32. Babel Coder Babel Coder https://www.babelcoder.com INTERCEPTING ROUTES app products page.tsx articles page.tsx auth sign-in page.tsx @auth (.)auth sign-in page.tsx layout.tsx
- 34. Babel Coder Babel Coder https://www.babelcoder.com STATE useState ใช้ได้เฉพาะบน Client Components
- 35. Babel Coder Babel Coder https://www.babelcoder.com Mounted LIFE CYCLE Clean Up Updated สถานะที่ Client Components แสดงผลบน DOM แล้ว สถานะที่ Client Components อัพเดทการแสดงผลบน DOM แล้ว เมื่อ state หรือ props ที่สนใจเปลี่ยนค่า หรือเมื่อ คอมโพแนนท์กำลังจะสิ้นสุดการทำงานจะทำการ เรียก clean up function กรณีที่มีการเปลี่ยนแปลงค่า state หรือ props ที่สนใจ และกระบวนการของ clean up function เสร็จสิ้น จะเข้าสู่สถานะการแสดงผล ใหม่
- 36. Babel Coder Babel Coder https://www.babelcoder.com LIFE CYCLE useEffect(() => { return () => { } }, [deps]) ฟังก์ชันนี้จะถูกเรียกทุกครั้งที่เข้าสู่สถานะ Mounted หรือ Updated ฟังก์ชันนี้เรียกว่า cleanup function จะถูกเรียกก่อนคอมโพแนนท์จะสิ้นสุดการ ทำงาน หรือเมื่อ state หรือ props ใน deps เปลี่ยนแปลง cleanup function จะถูกเรียกก่อน ก่อนจะเข้าสู่สถานะ undated
- 37. Babel Coder Babel Coder https://www.babelcoder.com LIFE CYCLE useEffect(() => { return () => { } }, []) ฟังก์ชัน จะทำงานแค่ครั้งเดียวเมื่อ คอมโพแนนท์เข้าสู่สถานะ Mounted หรือ render แล้วบนเว็บเบราว์เซอร์
- 38. Babel Coder Babel Coder https://www.babelcoder.com LIFE CYCLE useEffect(() => { return () => { } }, [a, b]) เมื่อเข้าสู่สถานะ Mounted ฟังก์ชัน จะได้รับการทำงาน 1. เมื่อ a หรือ b เปลี่ยนแปลงค่าฟังก์ชัน จะถูกเรียกเพื่อเป็นการ cleanup 2. คอมโพแนนท์จะทำการอัพเดทการ เปลี่ยนแปลงใหม่ไปยัง DOM 3. คอมโพแนนท์เข้าสู่สถานะ Unmounted และฟังก์ชัน จะได้ รับการเรียกอีกครั้ง 4.
- 39. Babel Coder Babel Coder https://www.babelcoder.com LIFE CYCLE useEffect ใช้ได้เฉพาะบน Client Components
- 41. Babel Coder Babel Coder https://www.babelcoder.com REACT HOOKS ฟังก์ชัน useClient และ useEffect เป็นฟังก์ชันประเภทที่เรียกว่า React Hooks อันเป็น ฟังก์ชันที่เกี่ยวข้องกับ state หรือ Life cycle ของคอมโพแนนท์ โดย React Hooks สามารถใช้ งานได้กับ Client Components เท่านั้น
- 42. Babel Coder Babel Coder https://www.babelcoder.com RULES OF HOOKS การใช้งาน React Hooks นั้นสามารถใช้งานได้ในฟังก์ชันที่เป็นคอมโพแนนท์หรือฟังก์ชันที่เป็น Custom Hooks ได้เท่านั้น โดยการใช้งานจะต้องวางตำแหน่งของการเรียกใช้ไว้ที่ระดับบนสุด (Top-level) ของฟังก์ชัน
- 43. Babel Coder Babel Coder https://www.babelcoder.com CUSTOM HOOKS Custom Hooks คือฟังก์ชันที่มีการใช้ Hooks ตัวอื่นภายในฟังก์ชัน ข้อสังเกตของ ฟังก์ชันประเภทนี้คือจะมีการใช้คำว่า use นำหน้า ชื่อฟังก์ชัน เช่น useFetch เป็นต้น Custom Hooks เป็นฟังก์ชันที่จะช่วยให้เราสามารถแยก ส่วนของ Logic ออกจากคอมโพแนนท์เพื่อ การนำไปใช้ซ้ำได้โดยง่าย
- 44. RENDERING Babel Coder https://www.babelcoder.com
- 45. Babel Coder Babel Coder https://www.babelcoder.com 1 2 3 Build STATIC SIDE RENDERING Cached Files about.html 4
- 46. Babel Coder Babel Coder https://www.babelcoder.com 1 2 3 Build CLIENT SIDE RENDERING Cached Files orders.html 4 Second Rendering First Rendering 5 6
- 47. Babel Coder Babel Coder https://www.babelcoder.com 2 Second Rendering First Rendering 5 6 4 CLIENT SIDE RENDERING
- 48. Babel Coder Babel Coder https://www.babelcoder.com Render 1 2 3 4 5 DYNAMIC SERVER SIDE RENDERING /news/latest
- 49. Babel Coder Babel Coder https://www.babelcoder.com 1 2 3 Build 4 Cached Files articles Static Flow INCREMENTAL STATIC REGENERATION Build Cached Files articles 6 7 8 9 10 revalidate: 60
- 51. Babel Coder Babel Coder https://www.babelcoder.com pnpm build STATIC .next server app products.html
- 52. Babel Coder Babel Coder https://www.babelcoder.com DYNAMIC SSR pnpm build
- 53. Babel Coder Babel Coder https://www.babelcoder.com INCREMENTAL STATIC REGENERATION pnpm build .next server app products.html
- 54. Babel Coder Babel Coder https://www.babelcoder.com pnpm build STATIC SITE GENERATION app products [id] page.tsx .next server app products 1.html 2.html
- 55. Babel Coder Babel Coder https://www.babelcoder.com STATIC SITE GENERATION .next server app products 1.html 2.html 3.html /products/3 .next server app products 1.html 2.html