Tutorials

Implementing URL Redirects with Next.js

Configuring URL Redirects within your website is essential for Content Editors who want to manage URL Redirections in Agility CMS to provide a way for redirecting a user from one URL to another URL.

Setting up URL Redirects in Next.js is fairly easy. Within the next.config.js file, can use the getUrlRedirections API Call from our @agility/content-fetch package to fetch our redirect from Agility, and configure them within our website.

In next.config.js:

const agility = require("@agility/content-fetch");

const api = agility.getApi({
  guid: process.env.AGILITY_GUID,
  apiKey: process.env.AGILITY_API_FETCH_KEY,
});

const getRedirects = async () => {
  try {
    return (redirects = await api.getUrlRedirections({}));
  } catch (e) {
    console.log(e);
  }
};

module.exports = {
  async redirects() {
    const { items } = await getRedirects();

    const redirects = items.map((redirect) => {
      let permanent;

      const source = redirect.originUrl.replace("~", "");
      const destination = redirect.destinationUrl.replace("~", "");

      if (redirect.statusCode === 301) {
        permanent = true;
      } else {
        permanent = false;
      }

      return {
        source,
        destination,
        permanent,
      };
    });

    return redirects;
  },
};

Learn more about redirects in Agility CMS here.