Why Dynamic routes with [param] in NextJS? - Purpose & Use Cases

The Big Idea

Discover how one simple file can handle hundreds of unique URLs effortlessly!

The Scenario

Imagine building a website where you have hundreds of user profiles, each with a unique URL like /user/john or /user/mary. You try to create a separate page file for each user manually.

The Problem

Manually creating a file for every user is impossible to maintain. Every time a new user joins, you must add a new file. It's slow, error-prone, and your project quickly becomes cluttered and hard to update.

The Solution

Dynamic routes with [param] let you create one flexible page that automatically handles all user URLs. You write code once, and Next.js fills in the details based on the URL, making your app scalable and easy to manage.

Before vs After

✗ Before

pages/user/john.js
pages/user/mary.js

✓ After

pages/user/[username].js

What It Enables

This lets you build scalable websites that respond to many different URLs with just one dynamic page, saving time and reducing errors.

Real Life Example

A blog site where each post has its own URL like /post/how-to-cook or /post/learn-nextjs, all handled by a single dynamic route page.

Key Takeaways

Manual page creation for each URL is not practical.

Dynamic routes use [param] to handle many URLs with one page.

This makes your app scalable, cleaner, and easier to maintain.