Creating Dynamic Routes in Next.js with Just 4 Lines of Code

Did you know you can create dynamic routes in Next.js with just four lines of code?

As a freelancer working on front-end projects to pay the bills (thanks, American healthcare system), I recently discovered how to create dynamic routes in Next.js without any extra complications.

The Problem

I was tasked with creating a list of dashboards for Annual Performance Reviews (APR). Each APR has a unique name, and each one needs its own route, like:

http://localhost:3000/apr/[ReviewType]

With a large dataset containing various types of APRs, manually creating each route by making individual folders inside the app directory wasn’t feasible:

-- app

--- review[0].type

--- page.jsx

--- review[1].type

--- page.jsx

--- review[2].type

--- page.jsx

Manually replacing review[index].type with the actual review types from my data would be tedious and inefficient.

The Solution

I simplified the structure by creating a single folder:

-- app

-- apr/[reviewType]

Using square brackets in a folder name creates what Next.js calls a Dynamic Segment. With a Dynamic Segment, you can access all the parameters using the useRouter hook.

In my case, I didn’t need to use the hook because I already had the review types, and the slugs in the URL matched those types. The solution was straightforward:

const reviewType = reviewsType.find((rt) => rt.slug === params.reviewType);

The {params} are the props in the page.jsx file of my Dynamic Route. If the reviewType from the URL matches the slug type, it’s a valid reviewType, and I can create the slug.

It’s that simple. Later, I'll call the Links with their href destination to generate the user’s click in the sidebar component:

reviewsType.map((rt) => <Link href={/apr/${rt.slug}}> {rt.title} </Link>);

Conclusion

Next.js routing is incredibly powerful and easy to use. I’m excited to continue exploring all of Next.js’s capabilities and preparing a course for developers like me. If you’re proficient in web development but new to Next.js, join our community learning sessions. Live sessions and recordings will be available!

Interested? Reach out!