Next.js Dynamic Route Segments

Dynamic routing is a core feature in modern web frameworks, enabling applications to handle variable paths based on user input or dynamic content. In Next.js 13+, with the introduction of the App Router, dynamic routes are implemented using a folder-based structure inside the app directory.

This article provides a step-by-step guide to implementing dynamic routes using the latest App Router approach, replacing the legacy pages directory system.

What Are Dynamic Route Segments?

Dynamic route segments allow developers to define routes that adapt to variable content. For instance, a blog platform might use URLs like /post/123 or /post/my-article. The segment (123, my-article) is dynamic and handled by bracket syntax:

app/post/[id]/page.js

With this structure, any value in place of [id] is captured and made available via the routing API.

Prerequisites:

• Node.js installed
• Basic understanding of React and Next.js
• Using Next.js 13+ with App Router

Steps to Implement Dynamic Routes

Here is a step-by-step guide to creating the routing:

Step 1: Create a New Next.js Project

Use the following command to bootstrap your project:

npx create-next-app@latest gfg

During setup, ensure you select the following options:

• Use App Router
• Do not include the pages/ directory

Step 2: Create a Dynamic Route Folder

Inside the app directory, create a nested folder structure for your route:

app/
  route/
    [data]/
      page.js

• The [data] folder signifies a dynamic segment.
• The page.js file is required—it renders the component for the dynamic route.

Step 3: Access Dynamic Parameters

Use the useParams() hook provided by next/navigation to access the dynamic value:

// app/route/[data]/page.js

'use client'
import { usePathname, useParams } from 'next/navigation'

export default function DynamicRoute() {
  const pathname = usePathname()
  const params = useParams()

  return (
    <div>
      <h1>GeeksforGeeks</h1>
      <h2>Pathname: {pathname}</h2>
      <h2>Dynamic Parameter: {params.data}</h2>
    </div>
  )
}

In the above example first, we are calling our useRouter() hook and after that, we are displaying the objects of our router in the console.

• pathname:  Current route. That is the path of the page in ‘/pages’.
• query: The query string parsed to an object.
• asPath: The path (including the query) shown in the browser.

Step 4: Start the Development Server

Launch your app using:

npm run dev

Visit a route like http://localhost:3000/route/hello, and you’ll see:

Output: