![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-240621085556-b3c8e1c1/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-240621085556-b3c8e1c1/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-240621085556-b3c8e1c1/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-240621085556-b3c8e1c1/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-240621085556-b3c8e1c1/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-240621085556-b3c8e1c1/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-240621085556-b3c8e1c1/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-240621085556-b3c8e1c1/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 āļŦāļĨāļąāļ āļāļāļĄāđāļāđāļāļāļāđāļŠāļģāļŦāļĢāļąāļ / $ pnpm create next-app@latest â What is your project named? ... ui â Would you like to use TypeScript? ... No / Yes â Would you like to use ESLint? ... No / Yes â Would you like to use Tailwind CSS? ... No / Yes â Would you like to use `src/` directory? ... No / Yes â Would you like to use App Router? (recommended) ... No / Yes â Would you like to customize the default import alias (@/*)? ... No / Yes
- 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 @users @products 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 āļāļąāļāļāđāļāļąāļ useState āđāļĨāļ° 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
- 56. TAILWIND Babel Coder https://www.babelcoder.com
- 57. Babel Coder Babel Coder https://www.babelcoder.com TAILWIND CSS Tailwind CSS āđāļāđāļāđāļāļĢāļĄāđāļ§āļīāļĢāđāļāļāļāļ CSS āļāļĩāđāđāļāđāļŦāļĨāļąāļāļāļēāļĢāļāļāļ Utility-first āļāļĨāđāļēāļ§āļāļ·āļāđāļāđāļĨāļ°āļāļĨāļēāļŠāļāļāļ CSS āļāļ°āđāļāļāļāļĩāđāļāļāļāļāļ CSS āļāļĒāđāļēāļāđāļāļāļĒāđāļēāļāļŦāļāļķāđāļ āļāļąāđāļāļāļģāđāļŦāđāļāļąāđāļāđāļāļĢāđāļāļāļāļ°āļĄāļĩāļāļĨāļļāđāļĄāļāļāļ CSS āļāļĩāđ āđāļāļīāļāļāļķāđāļāļāļēāļāļāļēāļĢāđāļāđāļāļēāļāļāļģāļāļ§āļāđāļĄāđāļĄāļēāļ āđāļĨāļ°āļŠāļēāļĄāļēāļĢāļāđāļāđāļāļĨāļēāļŠāđāļŦāļĨāđāļēāļāļąāđāļ āļāđāļģāđāļāđ
- 58. SHADCN UI Babel Coder https://www.babelcoder.com
- 59. Babel Coder Babel Coder https://www.babelcoder.com SHADCN UI Shadcn UI āđāļāđāļāđāļĨāļāļĢāļēāļĢāļĩāđāļāļĩāđāļĢāļ§āļĄāļāļĨāļļāđāļĄāļāļāļāļāļāļĄāđāļāđāļāļāļāđāļāļāļ React āļāļĩāđāļĄāļĩāļĢāļđāļāđāļāļāļāļāļāļāļēāļĢāđāļāđāļāļēāļ Tailwind āđāļāļ·āđāļāļŠāļĢāđāļēāļāļŠāđāļ§āļ āđāļŠāļāļāļāļĨāļāļĒāđāļēāļāļŠāļ§āļĒāļāļēāļĄ Shadcn UI āļĄāļēāļāļĢāđāļāļĄ CLI āļāļĩāđāļāļģāļŦāļāđāļēāļāļĩāđāđāļ āļāļēāļĢāļāļąāļāļĨāļāļāđāļāđāļāļāļāļāļāļāļĄāđāļāđāļāļāļāđāļāđāļāļāļāļąāļāļĄāļēāđāļŠāđāđāļ§āđāđāļāđāļāļĢāđāļāļāļāļāļ āđāļĢāļē āđāļĢāļēāļāļķāļāļŠāļēāļĄāļēāļĢāļāđāļāđāđāļ āļāļĢāļąāļāđāļāļĨāļĩāđāļĒāļāļāļēāļĢāđāļŠāļāļāļāļĨāđāļāđāļāļĒāđāļēāļāļāđāļēāļĒāļāļēāļĒ
- 61. Babel Coder Babel Coder https://www.babelcoder.com ZOD āļāļēāļĢāļāļĢāļ§āļāļŠāļāļ input āļāđāļēāļ āđ āļāļĩāđāļāļĒāļđāđāļ āļēāļĒāđāļāļāļāļĢāđāļĄ (<form>) āđāļāļĩāļĒāļ§āļāļąāļāļāļ° āđāļāļĢāļĩāļĒāļāđāļŠāļĄāļ·āļāļāđāļāđāļāļāļīāļĨāļāđāļāļĩāđāļāļĒāļđāđāđāļāđāļāļāļāđāļāđāļāļāđāđāļāļĩāļĒāļ§āļāļąāļ āļāļąāļāļāļąāđāļāļāļēāļĢāļāļĢāļ§āļāļŠāļāļ āļāđāļāļĄāļđāļĨāļāļāļ input āļāđāļēāļ āđ āđāļāļāļāļĢāđāļĄāļāļķāļāļāļ§āļĢāļāļīāļĒāļēāļĄāļāļāļāļēāļĢāļāļĢāļ§āļāļŠāļāļāđāļāļ Schema Zod āđāļāđāļāđāļĨāļāļĢāļēāļĢāļĩāđāļāļĩāđāļŠāļāļąāļāļŠāļāļļāļāļāļēāļĢāļāļĢāļ§āļāļŠāļāļāļāđāļēāļāđāļāļĄāļđāļĨāđāļāļ Schema āđāļāđ
- 62. Babel Coder Babel Coder https://www.babelcoder.com Zod ZOD OBJECT āđāļĨāļāļĢāļēāļĢāļĩāđāļŠāļģāļŦāļĢāļąāļāļāļēāļĢāļāļąāļāļāļēāļĢāļāļāļĢāđāļĄ āļĄāļąāļāļĢāļ§āļāļĢāļ§āļĄāļāđāļēāļāļāļ input āļāđāļēāļ āđ āļ āļēāļĒāđāļ āļāļāļĢāđāļĄāđāļŦāđāļāļĒāļđāđāđāļāļĢāļđāļāđāļāļāļāļāļāļāļāļāđāļāđāļāļāđ āļāļąāļāļāļąāđāļāđāļĢāļēāļŠāļēāļĄāļēāļĢāļāđāļāđ Zod āđāļāļāļēāļĢ āļāļĢāļ§āļāļŠāļāļāļāļāļāđāļāđāļāļāđāļāļāļ input āđāļāļāļāļĢāđāļĄāļāļąāđāļāđāļāđ Input
- 63. Babel Coder Babel Coder https://www.babelcoder.com EXTEND āļāļēāļāļāļĢāļąāđāļāđāļĢāļēāļāđāļāļāļāļēāļĢāļŠāļĢāđāļēāļāļāļāļāļēāļĢāļāļĢāļ§āļāļŠāļāļāđāļŦāļĄāđāļāļĩāđāļŠāļ·āļāļāļāļāļĄāļēāļāļēāļāļāļāļāļĩāđāļĄāļĩāļāļĒāļđāđ āđāļĨāđāļ§ āđāļĢāļēāļāļķāļāļāļģāļāļēāļĢ extend āļāļāđāļāļīāļĄāļāđāļ§āļĒāļŠāđāļ§āļāđāļāļīāđāļĄāļāļĩāđāļāđāļāļāļāļēāļĢ
- 64. Babel Coder Babel Coder https://www.babelcoder.com CUSTOM ERROR MESSAGE āđāļĢāļēāļŠāļēāļĄāļēāļĢāļāļĢāļ°āļāļļāļāļĢāđāļāļāđāļāļāļĢāđāļāļĩāđ message āđāļāļ·āđāļāļĢāļ°āļāļļāļāđāļāļāļ§āļēāļĄāđāļŠāļāļāļāļĨāļāđāļ āļāļīāļāļāļĨāļēāļāđāļāđāđāļāļāļāļāļāļāļāļēāļĢāļāļĢāļ§āļāļŠāļāļ
- 65. Babel Coder Babel Coder https://www.babelcoder.com ZOD INFER āļāļ§āļēāļĄāļŠāļēāļĄāļēāļĢāļāļāļīāđāļĻāļĐāļāļĒāđāļēāļāļŦāļāļķāđāļāļāļāļ Zod āļāļ·āļāļāļēāļĢāļĢāđāļāļāļāļāļāļāļīāļāļāđāļāļĄāļđāļĨ TypeScript āļāļēāļāļāļģāļŠāļąāđāļ z.infer { email: string; password: string; }
- 66. Babel Coder Babel Coder https://www.babelcoder.com REACT HOOK FORM React Hook Form āđāļāđāļāđāļĨāļāļĢāļēāļĢāļĩāđāļŠāļģāļŦāļĢāļąāļāļāļēāļĢāļāļąāļāļāļēāļĢāļāļāļĢāđāļĄāļāļ React āļāļĩāđ āļŠāļēāļĄāļēāļĢāļāđāļāđāļāļēāļāļāļ§āļāļāļđāđāļāļąāļ Zod āđāļĨāļ° Shadcn UI āđāļāđ $ docker run -p 5152:80 babelcoder/intro-to-devops-ui:1.0
- 67. Babel Coder Babel Coder https://www.babelcoder.com REACT HOOK FORM
- 68. Babel Coder Babel Coder https://www.babelcoder.com REACT HOOK FORM
- 69. Babel Coder Babel Coder https://www.babelcoder.com REACT HOOK FORM