Deployment & Environment Variables in Next.js Quiz – 15 Questions with Answers
15 questions · 12 min · Medium
Dynamic Routing & Catch-all Routes in Next.js
Test your knowledge of dynamic routes, dynamic segments, catch-all routes, optional catch-all routes, route parameters, and file-based routing in Next.js.
- 15
- Questions
- 12 min
- Time limit
- Medium
- Difficulty
No sign-up needed · Last updated:
Score: 0 00:00
Save your score
Create a free account to keep your scores and track your progress. It is optional.
Questions to review
Related quizzes
Next.js API Routes & Server Actions Quiz – 20 Questions with Answers
20 questions · 15 min · Medium
Data Fetching (SSR, SSG, ISR) in Next.js Quiz – 15 Questions with Answers
15 questions · 12 min · Medium
Image & Font Optimization in Next.js
15 questions · 12 min · Medium
State Management in Next.js Quiz
15 questions · 12 min · Medium
Layouts & Pages in Next.js
15 questions · 12 min · Medium
All 15 questions and answers Spoilers: this shows the questions and answers. Try the quiz first! Open
-
1. What is dynamic routing in Next.js?
- A. Creating routes whose paths can contain dynamic values
- B. Creating routes only at runtime using CSS
- C. Disabling file-based routing
- D. Creating routes that cannot accept parameters
Show answer
A. Creating routes whose paths can contain dynamic values
Dynamic routes allow parts of a URL to be represented by values such as IDs, usernames, or slugs.
-
2. In the Next.js App Router, how is a dynamic route segment represented in a folder name?
- A. [id]
- B. {id}
- C. (id)
- D. <id>
Show answer
A. [id]
A folder such as app/products/[id] defines a dynamic route segment named id.
-
3. What URL pattern does app/products/[id]/page.js represent?
- A. /products/[id]
- B. /products/id
- C. /products/{id}/all
- D. /id/products
Show answer
A. /products/[id]
The [id] segment is dynamic, so URLs such as /products/10 or /products/abc can match the route.
-
4. For the route app/blog/[slug]/page.js, what does the slug represent?
- A. A dynamic route parameter
- B. A fixed URL value
- C. A query string
- D. A CSS class
Show answer
A. A dynamic route parameter
The [slug] folder creates a dynamic segment whose value is available as a route parameter.
-
5. What is a catch-all route in the Next.js App Router?
- A. A route that captures multiple URL segments
- B. A route that accepts only one fixed segment
- C. A route that disables dynamic parameters
- D. A route used only for API requests
Show answer
A. A route that captures multiple URL segments
A catch-all segment can capture multiple path segments and expose them as an array of values.
-
6. How is a catch-all dynamic segment represented in the Next.js App Router?
- A. [...slug]
- B. [slug]
- C. {...slug}
- D. (...slug)
Show answer
A. [...slug]
The [...slug] syntax defines a catch-all dynamic segment that captures one or more path segments.
-
7. Which URL can be matched by app/docs/[...slug]/page.js?
- A. /docs/getting-started
- B. /docs
- C. /docs-fixed
- D. /
Show answer
A. /docs/getting-started
A catch-all segment can match one or more segments after /docs, such as /docs/getting-started or /docs/api/reference.
-
8. What type of value does a catch-all route parameter typically contain?
- A. An array of path segments
- B. A Boolean
- C. A number only
- D. A CSS selector
Show answer
A. An array of path segments
For a catch-all segment such as [...slug], the parameter contains the captured path segments as an array.
-
9. How is an optional catch-all segment represented in the Next.js App Router?
- A. [[...slug]]
- B. [...slug]
- C. [slug?]
- D. {...slug}
Show answer
A. [[...slug]]
The [[...slug]] syntax defines an optional catch-all segment, which can also match the route without any additional path segments.
-
10. What is the key difference between [...slug] and [[...slug]]?
- A. [[...slug]] can also match the route without the catch-all segments
- B. [...slug] supports query strings while [[...slug]] does not
- C. [...slug] is static while [[...slug]] is dynamic
- D. There is no difference
Show answer
A. [[...slug]] can also match the route without the catch-all segments
A regular catch-all requires at least one captured segment, while an optional catch-all can match zero or more segments.
-
11. For app/shop/[[...slug]]/page.js, which URL can be matched?
- A. /shop
- B. /shop/products
- C. /shop/products/electronics
- D. All of the above
Show answer
D. All of the above
An optional catch-all route can match /shop as well as paths containing one or more additional segments.
-
12. In the Next.js App Router, where are dynamic route parameters available to a page?
- A. Through the params prop
- B. Through document.params only
- C. Through window.route only
- D. Through CSS variables
Show answer
A. Through the params prop
App Router pages and layouts can receive dynamic route parameters through the params prop.
-
13. If the URL is /blog/nextjs/routing and the route is app/blog/[...slug]/page.js, what is the value represented by slug?
- A. ["nextjs", "routing"]
- B. routing
- C. nextjs/routing as a single number
- D. blog
Show answer
A. ["nextjs", "routing"]
The catch-all parameter captures each path segment after /blog as an array.
-
14. Which Next.js feature can be used to generate the list of known dynamic route parameters for static generation?
- A. generateStaticParams
- B. generateRoutesOnly
- C. createDynamicParams
- D. staticRoutes
Show answer
A. generateStaticParams
In the App Router, generateStaticParams can return parameter values used to statically generate dynamic routes.
-
15. Which statement about dynamic and catch-all routes in Next.js is correct?
- A. Dynamic segments match a single path segment, while catch-all segments can match multiple path segments
- B. Dynamic segments can only be used for API routes
- C. Catch-all routes can match only the root URL
- D. Optional catch-all routes cannot be used in the App Router
Show answer
A. Dynamic segments match a single path segment, while catch-all segments can match multiple path segments
A [segment] represents one dynamic path segment, while [...segment] captures multiple segments and [[...segment]] makes that catch-all portion optional.