Route Matching
Direct Matching
A URL can accurately reflect the path to a specific file within your project's structure.
For example, /products/top-10 would refer to the file /products/top-10.js.
When there is nesting in the path, but you want it to be invoked, use index.js.
For instance, /products/top-10 will map to either /products/top-10.js or /products/top-10/index.js.
| Route | Example URL |
|---|---|
| /index.js | / |
/products/index.js | /products |
/products/top-10.js | /products/top-10 |
Exact Matching
To capture exactly one parameter, use the following syntax in the folder or file name: [paramName].
| Route | Example URL | Params | Notes |
|---|---|---|---|
/products/[id].js | /products/123 | { id: '123' } | |
/categories/[catId]/products/[prodId].js | /categories/1/products/2 | { catId: '1', prodId: '2' } | Any nesting level |
/categories/[id]/products/[id].js | /categories/1/products/2 | { id: '2' } | If slug IDs have the same name, the last one will be taken. |
/products/top-10.js | /products/top-10 | You can still use direct matching. It will be prioritized over dynamic matching. |
Catching All
This type of matching can identify a list of slugs, but only if they are provided.
| Route | Example URL | Params | Notes |
|---|---|---|---|
/categories/[...categories].js | /categories/men/shoes/sneakers | { categories: ['men', 'shoes', 'sneakers'] } | |
/categories/[...categories].js | /categories/men | { categories: ['men'] } | |
/categories/[...categories].js | /categories | x | Won't capture anything, 404 |
Optional Catching All
This document is nearly identical to the previous one. The main difference is that it includes the root when no parameters are specified.
| Route | Example URL | Params | Notes |
|---|---|---|---|
/categories/[[...categories]].js | /categories/men/shoes/sneakers | { categories: ['men', 'shoes', 'sneakers'] } | |
/categories/[[...categories]].js | /categories/men | { categories: ['men'] } | |
/categories/[[...categories]].js | /categories | Will capture |