2020-07-06 16:01:42 +02:00
---
description: Add redirects to your Next.js app.
---
# Redirects
Redirects allow you to redirect an incoming request path to a different destination path.
Redirects are only available on the Node.js environment and do not affect client-side routing.
To use Redirects you can use the `redirects` key in `next.config.js` :
```js
module.exports = {
async redirects() {
return [
{
source: '/about',
destination: '/',
permanent: true,
},
]
},
}
```
`redirects` is an async function that expects an array to be returned holding objects with `source` , `destination` , and `permanent` properties:
- `source` is the incoming request path pattern.
- `destination` is the path you want to route to.
- `permanent` if the redirect is permanent or not.
## Path Matching
Path matches are allowed, for example `/old-blog/:slug` will match `/old-blog/hello-world` (no nested paths):
```js
module.exports = {
async redirects() {
return [
{
source: '/old-blog/:slug',
destination: '/news/:slug', // Matched parameters can be used in the destination
permanent: true,
},
]
},
}
```
### Wildcard Path Matching
To match a wildcard path you can use `*` after a parameter, for example `/blog/:slug*` will match `/blog/a/b/c/d/hello-world` :
```js
module.exports = {
async redirects() {
return [
{
source: '/blog/:slug*',
destination: '/news/:slug*', // Matched parameters can be used in the destination
permanent: true,
},
]
},
}
```
2020-07-14 03:26:54 +02:00
### Redirects with basePath support
When leveraging [`basePath` support ](/docs/api-reference/next.config.js/basepath.md ) with redirects each `source` and `destination` is automatically prefixed with the `basePath` unless you add `basePath: false` to the redirect:
```js
module.exports = {
basePath: '/docs',
async redirects() {
return [
{
source: '/with-basePath', // automatically becomes /docs/with-basePath
destination: '/another', // automatically becomes /docs/another
permanent: false,
},
{
// does not add /docs since basePath: false is set
source: '/without-basePath',
destination: '/another',
basePath: false,
permanent: false,
},
]
},
}
```
2020-07-29 11:23:23 +02:00
In some rare cases, you might need to assign a custom status code for older HTTP Clients to properly redirect. In these cases, you can use the `statusCode` property instead of the `permanent` property, but not both. Note: to ensure IE11 compatibility a `Refresh` header is automatically added for the 308 status code.