* Expand on the docs for the serverless target * Added catch all routes to API docs * Added caveat for catch all routes * Added link to Rauch's post about serverless * Add mention of `lang` * Add create-next-app to docs * Updated dynamic import examples to be more descriptive * Even better * Clarify valid catch all routes * Removed unexpected word * Apply suggestions from Joe Co-Authored-By: Joe Haddad <joe.haddad@zeit.co> * Keep #setup Co-Authored-By: Joe Haddad <joe.haddad@zeit.co> * Updated docs for the serverless target * Apply suggestions from code review Co-Authored-By: Shu Uesugi <shu@chibicode.com> * Update docs/getting-started.md Co-Authored-By: Shu Uesugi <shu@chibicode.com> * Added suggestion from chibicode Co-authored-by: Joe Haddad <timer150@gmail.com> Co-authored-by: Shu Uesugi <shu@chibicode.com>
1.9 KiB
description |
---|
You can add the dynamic routes used for pages to API Routes too. Learn how it works here. |
Dynamic API Routes
API routes support dynamic routes, and follow the same file naming rules used for pages
.
For example, the API route pages/api/post/[pid].js
has the following code:
export default (req, res) => {
const {
query: { pid },
} = req
res.end(`Post: ${pid}`)
}
Now, a request to /api/post/abc
will respond with the text: Post: abc
.
Catch all API routes
API Routes can be extended to catch all paths by adding three dots (...
) inside the brackets. For example:
pages/api/post/[...slug].js
matches/api/post/a
, but also/api/post/a/b
,/api/post/a/b/c
and so on.
Note
: You can use names other than
slug
, such as:[...param]
Matched parameters will be sent as a query parameter (slug
in the example) to the page, and it will always be an array, so, the path /api/post/a
will have the following query
object:
{ "slug": ["a"] }
And in the case of /api/post/a/b
, and any other matching path, new parameters will be added to the array, like so:
{ "slug": ["a", "b"] }
An API route for pages/api/post/[...slug].js
could look like this:
export default (req, res) => {
const {
query: { slug },
} = req
res.end(`Post: ${slug.join(', ')}`)
}
Now, a request to /api/post/a/b/c
will respond with the text: Post: a, b, c
.
Caveats
- Predefined API routes take precedence over dynamic API routes, and dynamic API routes over catch all API routes. Take a look at the following examples:
pages/api/post/create.js
- Will match/api/post/create
pages/api/post/[pid].js
- Will match/api/post/1
,/api/post/abc
, etc. But not/api/post/create
pages/api/post/[...slug].js
- Will match/api/post/1/2
,/api/post/a/b/c
, etc. But not/api/post/create
,/api/post/abc