Next
Redirects Plugin
This plugin allows you to easily manage redirects for your application from within your Admin Panel. It does so by adding a redirects collection to your config that allows you specify a redirect from one URL to another. Your front-end application can use this data to automatically redirect users to the correct page using proper HTTP status codes. This is useful for SEO, indexing, and search engine ranking when re-platforming or when changing your URL structure.
For example, if you have a page at /about and you want to change it to /about-us, you can create a redirect from the old page to the new one, then you can use this data to write HTTP redirects into your front-end application. This will ensure that users are redirected to the correct page without penalty because search engines are notified of the change at the request level. This is a very lightweight plugin that will allow you to integrate managed redirects for any front-end framework.
Core features
- Adds a
redirectscollection to your config that: - includes a
fromandtofields - allows
toto be a document reference
Installation
Install the plugin using any JavaScript package manager like pnpm, npm, or Yarn:
1
pnpm add @payloadcms/plugin-redirects
Basic Usage
In the plugins array of your Payload Config, call the plugin with options:
1
import { buildConfig } from 'payload'
2
import { redirectsPlugin } from '@payloadcms/plugin-redirects'
3
4
const config = buildConfig({
5
collections: [
6
{
7
slug: 'pages',
8
fields: [],
9
},
10
],
11
plugins: [
12
redirectsPlugin({
13
collections: ['pages'],
14
}),
15
],
16
})
17
18
export default config
Options
Option | Type | Description |
|---|---|---|
| | An array of collection slugs to populate in the |
| | A partial collection config that allows you to override anything on the |
| | Provide an array of redirects if you want to provide options for the type of redirects to be supported. |
| | A partial Field config that allows you to override the Redirect Type field if enabled above. |
Note that the fields in overrides take a function that receives the default fields and returns an array of fields. This allows you to add fields to the collection.
1
redirectsPlugin({
2
collections: ['pages'],
3
overrides: {
4
fields: ({ defaultFields }) => {
5
return [
6
...defaultFields,
7
{
8
type: 'text',
9
name: 'customField',
10
},
11
]
12
},
13
},
14
redirectTypes: ['301', '302'],
15
redirectTypeFieldOverride: {
16
label: 'Redirect Type (Overridden)',
17
},
18
})
Frontend Integration
It's important to note that this plugin only manages the redirects within the Payload Admin Panel and database. It does not handle the redirect itself.
You will need to implement the actual redirect logic in your front-end application (e.g., Next.js, Express, etc.) by querying the redirects collection and handling the redirects based on your application's routing logic.
A good example of how to implement this can be found in the Website Template.
TypeScript
All types can be directly imported:
1
import { PluginConfig } from '@payloadcms/plugin-redirects/types'
Examples
The Templates Directory also contains an official Website Template and E-commerce Template, both of which use this plugin.