Payload Redirects Plugin
A plugin for Payload to easily manage your redirects from within your admin panel.
Features
- Manage redirects directly from your admin panel
- Support for internal (reference) and external (custom URL) redirects
- Built-in multi-language support
- Optional redirect types (301, 302, etc.)
Installation
pnpm add @payloadcms/plugin-redirects
Basic Usage
In your Payload Config, add the plugin:
import { buildConfig } from 'payload'
import { redirectsPlugin } from '@payloadcms/plugin-redirects'
export default buildConfig({
plugins: [
redirectsPlugin({
collections: ['pages'],
}),
],
})
Configuration
Options
collections | string[] | An array of collection slugs to populate in the to field of each redirect. |
overrides | object | A partial collection config that allows you to override anything on the redirects collection. |
redirectTypes | string[] | Provide an array of redirects if you want to provide options for the type of redirects to be supported. |
redirectTypeFieldOverride | Field | A partial Field config that allows you to override the Redirect Type field if enabled above. |
Advanced Example
import { buildConfig } from 'payload'
import { redirectsPlugin } from '@payloadcms/plugin-redirects'
export default buildConfig({
plugins: [
redirectsPlugin({
collections: ['pages', 'posts'],
redirectTypes: ['301', '302'],
overrides: {
slug: 'custom-redirects',
fields: ({ defaultFields }) => {
return [
...defaultFields,
{
name: 'notes',
type: 'textarea',
admin: {
description: 'Internal notes about this redirect',
},
},
]
},
},
}),
],
})
Custom Translations
The plugin automatically includes translations for English, French, and Spanish. If you want to customize existing translations or add new languages, you can override them in your config:
import { buildConfig } from 'payload'
import { redirectsPlugin } from '@payloadcms/plugin-redirects'
export default buildConfig({
i18n: {
translations: {
de: {
'plugin-redirects': {
fromUrl: 'Von URL',
toUrlType: 'Ziel-URL-Typ',
internalLink: 'Interner Link',
customUrl: 'Benutzerdefinierte URL',
documentToRedirect: 'Dokument zum Weiterleiten',
redirectType: 'Weiterleitungstyp',
},
},
fr: {
'plugin-redirects': {
fromUrl: 'URL source',
},
},
},
},
plugins: [
redirectsPlugin({
collections: ['pages'],
}),
],
})
Using Redirects in Your Frontend
The plugin creates a redirects collection in your database. You can query this collection from your frontend and implement the redirects using your framework's routing system.
Example: Next.js Middleware
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
export async function middleware(request: NextRequest) {
const { pathname } = request.nextUrl
const redirects = await fetch('http://localhost:3000/api/redirects', {
next: { revalidate: 60 },
}).then((res) => res.json())
const redirect = redirects.docs?.find((r: any) => r.from === pathname)
if (redirect) {
const destination =
redirect.to.type === 'reference'
? redirect.to.reference.slug
: redirect.to.url
return NextResponse.redirect(
new URL(destination, request.url),
redirect.type === '301' ? 301 : 302,
)
}
return NextResponse.next()
}
Links