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: https://www.youtube.com/watch?v=6jM_0wDOw4g
◆ Next.js docs: https://nextjs.org/docs/getting-started/react-essentials
◆ Incremental adoption guide: https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration
◆ Why do Client Components get SSR'd to HTML? https://github.com/reactwg/server-components/discussions/4
◆ RSC From Scratch. Part 1: Server Components: https://github.com/reactwg/server-components/discussions/5
◆ Dynamic metadata: https://nextjs.org/docs/app/api-reference/functions/generate-metadata