Next.js: How to Migrate From Pages to App Router

Published: 17 September 2023
on channel: Coding in Flow

8,581

146

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/nextj...

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/