Dev.to

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) => {rt.title} ); 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!

May 8, 2025 - 21:09
 0
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) => /apr/${rt.slug}}> {rt.title} );

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!

Read More

Tags:

Previous Article

MediaSession API for Custom Media Controls

Next Article

$100K/day cloud bill isn't a Bug – it's by Design

Related Posts

CKEditor5 with Tailwind CSS

CKEditor5 with Tailwind CSS

May 8, 2025  0

Free vs Paid SSL Certificates: What's the Difference?

Free vs Paid SSL Certificates: What's the Difference?

May 9, 2025  0

May 9, 2025  0