Dynamic routes in Next

udit saurabh — Sat, 08 Mar 2025 15:40:30 +0000

*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.😁😁😁😁😁😁

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.

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>)
}

DEV Community: udit saurabh

Dynamic routes in Next