Redirects Plugin

NPM

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 redirects collection to your config that:
    • includes a from and to fields
    • allows to to be a document reference

Installation

Install the plugin using any JavaScript package manager like Yarn, NPM, or PNPM:

yarn add @payloadcms/plugin-redirects

Basic Usage

In the plugins array of your Payload config, call the plugin with options:

import { buildConfig } from "payload/config";
import redirects from "@payloadcms/plugin-redirects";
const config = buildConfig({
collections: [
{
slug: "pages",
fields: [],
},
],
plugins: [
redirects({
collections: ["pages"],
}),
],
});
export default config;

Options

OptionTypeDescription
collectionsstring[]An array of collection slugs to populate in the to field of each redirect.
overridesobjectA partial collection config that allows you to override anything on the redirects collection.

TypeScript

All types can be directly imported:

import { PluginConfig } from "@payloadcms/plugin-redirects/types";

Examples

The Examples Directory contains an official Redirects Plugin Example which demonstrates exactly how to configure this plugin in Payload and implement it on your front-end. The Templates Directory also contains an official Website Template and E-commerce Template, both of which use this plugin.

Next

Search Plugin