Name: Primer on Dynamic Routing in the Next.js App Router
Uploaded: 2023-08-02T19:44:56-05:00
Description: Get up to speed with dynamic/parameter based routing in the new app router by adding a very basic Link and a dynamic route that the Link will navigate us to

Primer on Next.js App Router Nested Layouts

Primer on Dynamic Routing in the Next.js App Router

Migrate Invoice Routes to Next.js App Router

Migrate Remaining Next.js Pages to App Router

Migrate UploadThing Route Handler to Next.js App Router 

CHALLENGE: Migrate Remaining Pages Api Routes

Refactor React Invoice Client Components in Next.js

Refactor Next.js User Info Api Route into React Server Components

Refactor Invoice POST Handler to Next.js Server Action

Refactor Next.js API Route for Deleting a Deposit Into a Server Action

Refactor Create Deposit Api Route into a Next.js Server Action

Next Migration Course Extras

Get up to speed with dynamic/parameter based routing in the new app router by adding a very basic Link and a dynamic route that the Link will navigate us to

https://app.egghead.io/api/v1/lessons/next-js-primer-on-dynamic-routing-in-the-next-js-app-router/subtitles

Instructor: [0:01] The last piece that we need to add before we're ready to completely move our pages app to our app router is dynamic routing. Here, we can come in and let's just add the import link from Next Link. Then let's paste our link here. All this is saying is let's go to the dashboard route and to this customer name.

[0:26] If we save this and come back to our app, we see we get Michael Scott. Now, if we click this, we'll get an error because we currently don't have a route set up for this. We can come into dashboard and let's create a new file.

[0:40] We need to give it the brackets and let's call it Customer Name. Then we need to give it a page.tsx. Here, we can simply say export default function customer and we need to pass it params. The params get typed as customer name string.

[1:06] Then we can just return an h1 with params.customerName. Now, if we save this, we come back. Let's go back to our dashboard and let's click on Michael Scott. We see we are getting Michael Scott's name right here and we're still getting our dashboard layout right here. That is all that you need to get started with dynamic routing.

Primer on Dynamic Routing in the Next.js App Router

Share this video with your friends

Course

Next Migration Course Extras