Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/nextjs/next-js-dynamic-route-segments/ below:

Next.js Dynamic Route Segments - GeeksforGeeks

Last Updated : 23 Jul, 2025

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.

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.

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

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

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

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.

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.

Launch your app using:

npm run dev

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

Output:

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4