Migrate From Pages to App Router in Next.js 14 - Full Guide ft
🔥 Today, we've brought Hamed Bahram, successful software engineer and content creator to explain how to safely move from Pages to App Router in a Next.js 13 or 14 project.
📍This full guide will cover the following chapters:
0:00 Intro
1:48 Project current setup
11:30 Migrating to the App router
13:50 Updating dependencies
15:40 File conventions in App router
19:20 Creating the App folder & root layout
23:40 Migrating pages
27:25 Routing hooks
28:30 Migrating data fetching
30:30 Prismic migration guide
33:20 Migrating the Home page
41:25 Migrating dynamic UID page
44:10 Migrating API endpoints
48:00 Recap
🔗 Prismic's blog article on App Router & Prismic: https://prismic.io/blog/how-to-use-pr...
Project repositories:
🔗 Starting Github Project: https://github.com/HamedBahram/prismi...
🔗 Finished project on Github: https://github.com/HamedBahram/prismi...
Following up with Hamed's tutorials:
Server vs. client components in the App router → • Server vs client components in NextJs...
Data fetching in the App router (SSG, SSR, ISR) → • Migrating from NextJs 12 `pages` router
The new next/font package → • Using the new next/font package | Nex...
---
As a developer, you should build websites using your favorite Jamstack framework.
Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a Next.js website, while delivering a page builder to your team: • Creating a Project With Slice Machine...
► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
► [Learn more about Slice Machine]: https://prismic.club/slice-machine
---
#nextjs #approuter