Primer on Dynamic Routing in the Next.js App Router

Ben Patton
InstructorBen Patton
Share this video with your friends

Social Share Links

Send Tweet
Published a year ago
Updated a year ago

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.

egghead
egghead
~ 4 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today