DEV Community

udit saurabh
udit saurabh

Posted on

Dynamic routes in Next

*Dynamic routes in Next.js
*

Dynamic routes have something dynamic/changing about routing and paths. 
In our hotel management project, suppose we create a route blog section and wish to display blogs based on dynamic route change, like blog/1,blog/2, etc, then we can use this functionality.😁😁😁😁😁😁

Image description
We can do dynamic routing in just 2 simple steps.
Create a folder with the name blog (folder name along which we need to create the blog posts).
Create another folder for the dynamic route like in /blog/2 for 2 by the name of [id]. In the folder [id] we create a file for page.tsx for rendering the jsx content.

Image description

Image description
Code for extracting the dynamic route value for using it like id or slug.

export default async function Page({
    params,
  }: {
    params: Promise<{ id: string }>
  })  
{
    const {id} = await params
    return( <div>this is id {id}</div>)
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)