Dynamic routes with [param] in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a dynamic route in Next.js?

A dynamic route in Next.js is a page route that uses square brackets [param] in the filename to capture variable parts of the URL, allowing the page to render different content based on the URL segment.

beginner

How do you define a dynamic route for a user profile page with a user ID in Next.js?

You create a file named [userId].js inside the pages or app directory. The [userId] part captures the user ID from the URL, like /profile/123, where 123 is the userId.

intermediate

How do you access the dynamic parameter inside a Next.js page component?

You use the useRouter hook from 'next/router' or the params object in server components to get the dynamic parameter value from the URL.

beginner

What is the difference between a static route and a dynamic route in Next.js?

A static route has a fixed path like /about, while a dynamic route uses [param] to match many paths like /product/1, /product/2, where the param changes.

intermediate

Can you have multiple dynamic segments in a Next.js route? How?

Yes, you can have multiple dynamic segments by naming files like [category]/[id].js. This captures two parameters from the URL, for example /books/123.

What does the file name [postId].js represent in Next.js routing?

A A dynamic route capturing postId from the URL

B A static route named postId

C A component that cannot be routed

D A special API route

Files with [param] in their name define dynamic routes that capture the param value from the URL.

How do you get the value of a dynamic route parameter inside a client component?

A Using window.location.pathname

B Using getStaticProps only

C Using useRouter hook from 'next/router'

D Using CSS selectors

The useRouter hook provides access to the dynamic route parameters in client components.

Which URL matches the dynamic route file [category]/[id].js?

A /category

B /books/123

C /123/books

D /books

The URL /books/123 matches the dynamic segments category=books and id=123.

What happens if you visit a dynamic route URL that does not match any file?

A Next.js shows a 404 page

B Next.js redirects to home

C Next.js crashes

D Next.js shows a blank page

If no matching route file exists, Next.js shows the 404 not found page.

Can dynamic routes be nested inside folders in Next.js?

A Only static routes can be nested

B No, all dynamic routes must be in root

C Dynamic routes must be flat files

D Yes, you can nest dynamic routes in folders

Dynamic routes can be nested inside folders to create complex URL structures.

Explain how to create and use a dynamic route with [param] in Next.js.

Think about how the file name relates to the URL and how to get the value inside the component.

Describe the difference between static and dynamic routes in Next.js and when to use each.

Consider how URLs look and what content changes.