Access Route Params from Props inside a Next.js Dynamic App Router Route
We finish migrating our customer routes to the app router by migrating our customer id route.
The biggest concept here to note is that you don't need to access the router to get dynamic page params, they are passed to the server component automatically. Here we remove the useRouter call and get the data from props.
As noted in the Course Description & Project Walkthrough video the majority of the remaining routes are left to you to migrate. If you would like to follow along in the Next Migration Extras Course check out the lessons "Migrate Invoice Routes" and "Migrate Remaining Pages to App Router"
And lastly, if you want to look at the code, at any time you can run git checkout solution and look in the final folder for the code you are looking for
Instructor: [0:00] The last route that we want to move over is our customer ID route. As we've done before, we can come into our Pages router, Customers, Customer ID, and we can just copy this whole page. Then we can come into our App Router under Sales v2, Customers, and add a new dynamic route with customer ID, and then page.tsx. We can paste all of this here.
[0:27] We know that we don't need this get layout function anymore, so we can remove those imports as well. Then, if we remember, in the App Router, we have access to the params from the route itself. Here, we can remove the router, because we don't need to get the customer ID from the router query params.
[0:49] Let's remove this import, and then we can get the params, which are typed as params customerID, and that is a string. Then we can just get the customer ID from the params.
[1:13] The last thing we need to do is make sure that we change this to a client component, because we're using React Query in a server component. We just need to add our 'use client' directive here, and then we save that.
[1:28] Let's come back to our app. Let's add a customer, we'll say "Michael Scott," ms@dundermifflinpaperco.com. As soon as we submit this, the way our API handler currently works is that it will try to navigate to the customer ID page, but it's still looking to the sales route.
[1:49] We'll submit this, we'll get an error, but if we come up here and we put v2, it'll load, and we would have Michael Scott's invoices here. Now we have effectively moved over one complete set of routes, our customer routes, under the sales route to our App Router.
[2:09] In review, we moved over our customer ID route to our App Router. We made it a client component, and instead of using the router from Next, we were able to just access the params that we have in our dynamic route and get the customer ID there. We can send that along with our useQuery call, and then everything works the same as we've expected.
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
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!