In this video, I show you how to migrate a Next.js project step by step from the pages directory to the new app router. ⭐ Get my full-stack Next.js with Express & TypeScript course: https://codinginflow.com/nextjs GitHub branch comparison: https://github.com/codinginflow/nextjs-express-typescript-course/compare/Final-Project...App-Router-Migration Timestamps: 0:00 - Course update 5:15 - What are React server components? 8:07 - What are client components? 11:06 - App folder & root layout.tsx (Replace _app.tsx & _document.tsx) 12:59 - Static metadata (replace next/Head) 13:21 - Creating pages (page.tsx) 14:19 - Dynamic routes (URL params) 14:50 - Fetching data in server components 17:31 - Static rendering (Replace getStaticProps & getStaticPaths) 18:38 - Dynamic rendering (Replace getServerSideProps) 21:53 - Dynamic metadata (generateMetadata) 23:41 - Default og:image & favicon 26:16 - How to use client components 29:27 - Putting server components inside client components (children prop) 31:16 - Colocating styles & files 31:43 - Other special files (loading.tsx, error.tsx, not-found.tsx) 33:28 - Re-exporting third-party component libraries (Bootstrap server component fix) 35:15 - Missing router events 36:39 - Client router cache refresh 37:58 - next/navigation (useRouter, usePathname, useSearchParams) 38:33 - API route handlers Music by Lukrembro Song titles: Marshmallow, Picnic, Highball, Rose, Travel, Lamp, Snow, Rudolph, Bored, Boba Tea, Sunset, Imagine, Every Day, Branch, Daily, Cheese Source: https://freetouse.com/music/