Next.js: How to Migrate From Pages to App Router
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/
Watch video Next.js: How to Migrate From Pages to App Router online without registration, duration hours minute second in high quality. This video was added by user Coding in Flow 17 September 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 8,581 once and liked it 146 people.