Need a way to dynamically source 308 redirects from CMS

[dsosborn]

Goals

1. Give content editors the ability to add individual redirects
2. Give CMS the ability to programmatically generate and store redirects
3. Have real time up-to-date 308 redirects

Non-Goals

No response

Background

One of the nice things about our current monolithic website solution (that we're trying to move away from), is the ability for content editors to add redirects in real time. There is currently no way to completely match this with NextJS. Redirects in the Next config file are only generated at build time, middleware is incapable of caching fetch data and does not catch client side requests that should be redirected, and adding it as a fallback in a dynamic catch-all page.tsx only uses meta redirects, not 307/308.

Proposal

Add the option for a redirects.ts file in the root/src directory. This file would be able to cache fetch requests same as a page.tsx file, with the ability to set a revalidate time and cache tags. The fetch would stay cached until the revalidate time was up, or revalidateTag was called with a relevant tag. It would export an array of redirect objects. The server should behave exactly as it does currently with redirects set in the Next config.

Example redirects.ts:

export default async function Redirects() {
    const redirectRequest = await fetch("https://...", {
        next: { tags: ["redirects"] },
    });
    const redirectData = await redirectRequest.json();
    const redirects = redirectData.map(
        (rdr: { source: string; destination: string; permanent: string }) => ({
            source: `/${rdr.source}`,
            destination: `/${rdr.destination}`,
            permanent: rdr.permanent || true,
        })
    );
    return [
        {
            source: "/old/3",
            destination: "/",
            permanent: true,
        },
        ...redirects,
    ];
}