Incrementally adopt the Next.js App Router

Learn how to move routes from pages/ to app/ with Next.js. This tutorial includes background on React Server & Client components, new Next.js APIs, and practical strategies for adopting the latest features.

0:00 – Introduction
0:14 – Static Routes
1:12 – Server Components
1:40 – Client Components
4:15 – Mixing Client & Server Components
6:22 – next/head and Metadata API
7:45 – Data fetching and getServerSideProps
9:28 – async/await in React Server Components
11:28 – Passing data to Client Components
13:03 – fetch() and caching
14:02 – Incremental Static Regeneration
14:26 – Layouts, _app.js, _document.js
15:45 – Conclusion

◆ Client components:    • Are React client components bad?  
◆ Next.js docs: https://nextjs.org/docs/getting-start...
◆ Incremental adoption guide: https://nextjs.org/docs/app/building-...
◆ Why do Client Components get SSR'd to HTML? https://github.com/reactwg/server-com...
◆ RSC From Scratch. Part 1: Server Components: https://github.com/reactwg/server-com...
◆ Dynamic metadata: https://nextjs.org/docs/app/api-refer...