Catch-all routes with [...param] in NextJS - Mini Project: Build & Apply

Catch-all Routes with [...param] in Next.js

📖 Scenario: You are building a simple Next.js website that shows different pages based on the URL path. You want to catch all paths under a certain folder and display them dynamically.

🎯 Goal: Create a catch-all route using [...param] in Next.js that captures all URL segments after a base path and displays them as a list on the page.

📋 What You'll Learn

Create a Next.js page file with a catch-all route named [...param] inside the app/docs/ folder

Extract the catch-all route parameter named param using Next.js server component props

Render the param segments as an unordered list (<ul>) on the page

Handle the case when no segments are provided by showing a message No path segments provided

💡 Why This Matters

🌍 Real World

Catch-all routes are useful for building documentation sites, blogs, or any app where the URL path can have many nested levels and you want to handle them dynamically.

💼 Career

Understanding catch-all routes in Next.js is important for frontend developers working on dynamic websites and apps that require flexible routing and content rendering.

1

Create the catch-all route file

Create a new file named app/docs/[...param]/page.tsx with a default export of a React functional component named DocsPage.

NextJS

// Create the file app/docs/[...param]/page.tsx
// Export a React component named DocsPage

export default function DocsPage() {
  // Your code here
}

Need a hint?

This step sets up the file that will catch all routes under /docs/.

2

Add the catch-all route parameter

Modify the DocsPage component to accept a params prop with a property param typed as string[] | undefined. Use destructuring in the function parameter to get param from params.

NextJS

export default function DocsPage({ params }: { params: { param?: string[] } }) {
  // Your code here
}

Need a hint?

Next.js passes route parameters inside the params prop. The catch-all parameter param is an array of strings or undefined.

3

Render the path segments as a list

Inside the DocsPage component, check if param exists. If it does, render an unordered list (<ul>) with each segment as a list item (<li>). Use param.map with segment and index as parameters. If param is undefined, render a paragraph (<p>) with the text No path segments provided.

NextJS

export default function DocsPage({ params }: { params: { param?: string[] } }) {
  const { param } = params;
  // Your code here
}

Need a hint?

Use conditional rendering to show either the list of segments or a message if none are provided.

4

Add a heading and export the complete page

Add a heading (<h1>) with the text Docs Path above the list or message. Ensure the component is the default export and the file is named page.tsx inside app/docs/[...param]/.

NextJS

export default function DocsPage({ params }: { params: { param?: string[] } }) {
  const { param } = params;
  // Your code here
}

Need a hint?

Use React fragments (<></>) to wrap multiple elements returned from the component.