Set Up Server-side Redirects

This tutorial covers creating a Data model to configure server-side redirects in Builder. A server-side redirect is a technique for rerouting site traffic from one web address to another. For example, if you create a Page and later want to reroute visitors to another Page that has a different URL, you'd set up a URL redirect.

Use cases for server-side redirects include:

Reroute traffic to an updated Page from an outdated one.
Phase out an old URL without breaking links to the old URL.
Redirect traffic when you're updating URL naming conventions.

Prerequisites

Youʻll need an evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.

Create a Data model

Go to Models.
Click the + Create New button.
Name and describe your model. This example uses the Name URL Redirects and the Description Manage URL redirects for site content.
Add a custom field by clicking on the + New Field button. Name the first new field sourceUrl with a Type of Url.
Repeat the previous step for a field called destinationUrl of Type Url and a third field called redirectToPermanent of Type Boolean.
Click Save.

The following video goes through the above steps:

Tip: When you configure your codebase to use the redirect in Step 3, you'll need the name of the model you just created. The name, known as the Unique identifier in the Builder UI, in this example is url-redirects, which you can find by clicking the Show More button.

For a video pointing out the location of the name, refer to the Finding the model name section of Data Models.

Use your data model to make content entries

The next step is to use the Data model you just made. Here you make a Data content entry to redirect a URL called /site/intro to /site/getting-started.

Go to Content.
Click the + New button.
Select URL redirect.
For the SourceUrl, enter /site/intro.
For the DestinationUrl, enter /site/getting-started.
Name the new content entry /site/intro -> /site/getting-started. This way, when the URL Redirects are listed in the content area of Builder, each redirect's purpose is in the name, so you don't have to open them to see the URLs that are being redirected.
Click Save.

This video shows the process of making a server-side-redirect as outlined above:

Configure your code

The next step is to configure your codebase as in the next code snippet. Use builder.getAll() to get all the redirects from Builder. Then, create an object that Next.js can use and, optionally, add an error handler. The code snippet in this section covers each of these tasks in turn.

Tip: The next.config.js file has a 1024 entry count limit. For more context, refer to Vercel's guide, How can I increase the limit of redirects or use dynamic redirects on Vercel?.

Make sure you're using a framework that supports these features (check your framework's documentation) and follow your framework's guidelines for fetching data server-side when integrating Pages or Sections.

In next.config.js, add this code:

js
const { builder } = require("@builder.io/sdk");

module.exports = {
  async redirects() {
    const results = await builder.getAll("url-redirects");

    return results.map(({ data }) => ({
      source: data.sourceUrl,
      destination: data.destinationUrl,
      permanent: !!data.redirectToPermanent,
    }));
  },
};

To find your Public API Key, go to Settings. For more information on the Public API Key, see Using the Builder API Key.

For more information, refer to Vercel's Redirect documentation.

Add a webhook

With Next.js sites, you need to trigger a rebuild for new redirects. Since Next.js evaluates the next.config.js only once when building an app, newly added redirects don’t take effect immediately. To cause this rebuild, use a webhook.