Having bulletproof redirect functionality in place will ensure you retain your current SEO value on existing pages and avoid any 404s. Google (mainly) and other search engines have gotten much more strict about how they rank websites, specifically those that have 404s, or pages that lead to nowhere.

Additionally, the marketing team has likely done a lot of work building up their SEO ranking, and it's extremely important to keep that in place after a migration.

Surprisingly, many headless content management systems don't offer redirect functionality out of the box, and you're stuck with the hassle of building this yourself.

We've been there, and that's exactly why we built our redirects plugin. It's easy for you to integrate and even easier for marketers or content managers to use which lets you focus on the rest of your project.

For the purposes of this post, I've already got our redirects example up and running so let's dive in!

As you can see in the screenshot below, the redirects plugin creates a new collection called Redirects, which is where you'll create and manage all of your redirects.

Now, if you take a look at the example below, you'll see our payload.config is pretty straightforward. We have a pages collection, and when we go to setup our redirects we will have the ability to select documents from that collection.

1import redirects from '@payloadcms/plugin-redirects'
2import path from 'path'
3import { buildConfig } from 'payload/config'
4
5import { Pages } from './collections/Pages'
6import { Users } from './collections/Users'
7import { MainMenu } from './globals/MainMenu'
8
9export default buildConfig({
10  collections: [Pages, Users],
11  cors: ['http://localhost:3000', process.env.PAYLOAD_PUBLIC_SITE_URL],
12  globals: [MainMenu],
13  typescript: {
14    outputFile: path.resolve(__dirname, 'payload-types.ts'),
15  },
16  plugins: [
17    redirects({
18      collections: ['pages'],
19    }),
20  ],
21})
22

If you click into one of the redirects you'll see two fields. The fields themselves are pretty straightforward - you have a From URL field, which is the URL string that will be matched up against the requested path, and the To URL field, which is conditional, and provides the option to link to a custom URL or internal doc.

The upside is that you don't need to know all the ins and outs of how the plugin works, but we suspect you're going to dig around anyway and we're all for that.

Wrap up

We understand that redirects aren't the most exciting thing in the world, but being able to simply drop this into your project will make things much easier. With our redirects plugin, you've got a solution for almost any scenario you'll be up against.

I hope you found this post helpful and that you can start utilizing this powerful plugin for your Payload project. Cheers.

Learn More

To learn more about the official redirects plugin, Payload CMS and Next.js, take a look at the following resources:

Get Started

1yarn add @payloadcms/plugin-redirects

Like what we're doing? Give us a star on GitHub

We're trying to change the CMS status quo by delivering editors with a great experience, but first and foremost, giving developers a CMS that they don't absolutely despise working with. All of our new features are meant to be extensible and work simply and sanely.