Primer on Dynamic Routing in the Next.js App Router
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
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.