Prismic | Migrate From Pages to App Router in Next.js 14 - Full Guide ft @hamedbahram @Prismic | Uploaded November 2023 | Updated October 2024, 13 hours ago.
🔥 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: prismic.io/blog/how-to-use-prismic-with-nextjs-app-router
Project repositories:
🔗 Starting Github Project: github.com/HamedBahram/prismic-next-migration
🔗 Finished project on Github: github.com/HamedBahram/prismic-next-migration
Following up with Hamed's tutorials:
Server vs. client components in the App router → youtu.be/3Dw6D_WuzSE
Data fetching in the App router (SSG, SSR, ISR) → youtu.be/OJ5GaNVujaw
The new next/font package → youtu.be/D5oMzgy0h98
---
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: youtu.be/jSa_uskwaE0
► [Starters] Try Slice Machine on Nuxt: prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: prismic.club/nextjs-starters
► [Learn more about Slice Machine]: prismic.club/slice-machine
---
#nextjs #approuter
🔥 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: prismic.io/blog/how-to-use-prismic-with-nextjs-app-router
Project repositories:
🔗 Starting Github Project: github.com/HamedBahram/prismic-next-migration
🔗 Finished project on Github: github.com/HamedBahram/prismic-next-migration
Following up with Hamed's tutorials:
Server vs. client components in the App router → youtu.be/3Dw6D_WuzSE
Data fetching in the App router (SSG, SSR, ISR) → youtu.be/OJ5GaNVujaw
The new next/font package → youtu.be/D5oMzgy0h98
---
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: youtu.be/jSa_uskwaE0
► [Starters] Try Slice Machine on Nuxt: prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: prismic.club/nextjs-starters
► [Learn more about Slice Machine]: prismic.club/slice-machine
---
#nextjs #approuter
