Visions In Code

Friends of Sitecore, may Autumn give you a lot of happiness 😀

The other day I had to set up a bunch of redirects in Sitecore XM Cloud. After reading this great blog post – Sitecore XM Cloud Redirects: Page-Level, Dynamic & Out of the Box Redirects from Dan Cruickshank at Fishtank, the decision was easy. I went for the Dynamic Redirects in XM Cloud Using Next.js approach since it indeed was “mass redirects.”

Setting up redirects is crucial for ensuring your users find the right content and for maintaining SEO ranking when making structural changes to your website. This means we will set up the redirects in next.config.js.

I don’t want to “hard code” the redirects, so let’s have them all in a JSON file. And to make it all pretty, let’s make a nice plugin.

Step 1: Creating a JSON File for Redirects

First up is the JSON file (we will call it massRedirects.json), and it will look something like this:

[
  {
    "source": "/old-something/page",
    "destination": "/new-something/page",
    "permanent": true
  },
  {
    "source": "/k(ö|%C3%B6)pa-h(ä|%C3%A4)star/hingst",
    "destination": "/buy-horses/stallion",
    "permanent": true
  },
  {
    "source": "/old-wildcard-node/:id(\\d+)(.*)",
    "destination": "/new-wildcard-node/:id",
    "permanent": true
  }
  
]

The three examples above demonstrate:

1. A simple redirect from /old-something/page to /new-something/page.
2. Handling special characters in URLs, e.g., ö or %C3%B6 in Swedish, to ensure users are redirected properly regardless of their input.
3. Redirecting old wildcard nodes with a dynamic ID to a new path while retaining the ID. This shows how to manage complex, parameterized redirects.

Step 2: Introducing Next.js Plugins

Wonderful!

Next up is the plugin. So what is a plugin?

Next.js plugins for next.config.js are tools that extend or customize the configuration of a Next.js application. They make it easy to integrate third-party features, handle specific file types (e.g., CSS, Sass), or add advanced capabilities like image optimization and environment-specific settings. By using plugins, developers can simplify tasks such as managing assets, optimizing the build process, or enabling additional functionality without manually setting complex configurations.

Step 3: Writing the Plugin

Plugin time! What we want to do is grab the JSON file and render it nicely as an array of redirects 🙂

const massRedirects = require("../../../redirects/massRedirects.json");

/**
 * Redirects Plugin
 *
 * This plugin dynamically adds custom redirects
 */
const redirectsPlugin = (config) => {
  return {
    async redirects() {
      const redirects = massRedirects;
      // Ensure the final result is an array
      return Array.isArray(redirects) ? redirects : [];
    },
  };
};

module.exports = redirectsPlugin;

Instead of using the fs library, why not do a good old require() on the JSON file directly? It’s simpler and reduces boilerplate code for reading JSON files, making it easier to maintain and faster to implement – Keep it simple, friends 😉

Step 4: Adding the Plugin to next.config.js

We will put the plugin in next-config/plugins/redirects.

It’s time to add our pretty plugin to the next.config.js file:

// Import the custom plugin for reading redirects
const readRedirectsPlugin = require("./src/next-config/plugins/redirects");

const nextConfig = {
  // Add custom redirects
  ...readRedirectsPlugin({}),
  // And a lot of other stuff here
}

We import the plugin and add it to the nextConfig object, and that’s it, friends 😀

Using a plugin for redirects not only makes the code cleaner but also makes it easier for future updates. If you ever need to add more redirects, simply update the JSON file without touching any configuration logic. I have to say plugins are the true path – it’s so clean!

Conclusion

Setting up redirects this way allows you to manage changes efficiently without hardcoding, ensuring that your website remains flexible, organized, and easy to maintain. Plus, leveraging the power of plugins makes everything cleaner and easier to update down the road.

That’s all for now, folks 🙂