Read Dynamic Route Params (App Router)

Next.js

React

JavaScript

Technical Specification

Use dynamic route segments and read params in a page component.

Input/Output Samples

Input:/products/laptop

Output:Slug is 'laptop'

Optimal Logic Path

// app/products/[slug]/page.tsx
export default function ProductPage({ params }) {
  return <h1>Product: {params.slug}</h1>;
}

Architectural Deep-Dive

Dynamic segment names automatically become keys in the params object.