Creating a redirect component

The Redirects area in the Studio lets you create redirects from page folders that no longer exist. However, sometimes, you might want to create a redirect from an existing page folder for a short period.

In this tutorial, you'll develop a redirect Frontend component and use it on the page folder you want to redirect users from.

Develop the Redirect Frontend component

Create the component schema

The Redirect Frontend component needs the URL to which you want to redirect the user. This URL can vary based on the page version where the component is used and therefore it must be configurable from the Studio.

Create the following schema with a redirectTarget field of type string and add it to the Studio.

Redirect component schemajson

{
  "tasticType": "docs/content/redirect",
  "category": "content",
  "icon": "arrow",
  "name": "Redirect Component",
  "schema": [
    {
      "name": "Redirect settings",
      "fields": [
        {
          "label": "Redirect target",
          "field": "redirectTarget",
          "type": "string"
        }
      ]
    }
  ]
}

Implement the React component

Inside the frontend/frontastic/tastics folder, create a folder named redirect, and create a new file named index.tsx inside it.

According to the redirect component schema, the React component receives the redirectTarget value configured by the Studio user as part of the component props.

Next.js App Router

To implement the redirect logic, use the redirect function from Next.js and redirect the user to the redirectTarget value:

React component to redirect the userTypeScript React

import { redirect } from 'next/navigation';

type Props = {
  data: {
    redirectTarget: string;
  };
};

export default function Redirect({ data }: Props) {
  redirect(data.redirectTarget);
}

Next.js Pages Router

To implement the redirect logic, use the useRouter hook from Next.js and redirect the user to the redirectTarget value:

React component to redirect the userTypeScript React

import { useRouter } from 'next/router';
import React, { useEffect } from 'react';

type Props = {
  data: {
    redirectTarget: string;
  };
};

export const Redirect = ({ data }: Props) => {
  const router = useRouter();

  const { redirectTarget } = data;

  useEffect(() => {
    router.replace(redirectTarget);
  }, [router]);

  return <div>Redirecting in 1. 2.. 3...</div>;
};

You must use the router from inside the useEffect hook to avoid issues with server-side rendering.

Register the Frontend component

To use the React component in a page, you must register it as a Frontend component in your code by adding it to the tastics object in the frontend/frontastic/tastics/index.tsx file:

// other components
import Redirect from './redirect';

export const tastics = {
  // other components
  'docs/content/redirect': Redirect,
};

Add the Redirect Frontend component

Finally, you must add the Redirect Frontend component to the live page version of the page folder you want to redirect from. Thus, when the user visits this page, the Redirect Frontend component will redirect them to the redirectTarget value configured in the Studio.

To add the Frontend components to the page version, follow these steps:

From the Studio home page or from the left menu, go to Site builder.
Use the page folder list and the status sections to navigate to the page version where you want to add the Redirect Frontend component. Then, hold the pointer over the page version and click the Edit icon: the page builder opens.

Add a 1/1 layout element to the MAIN layout section.

Use the Components pane to find the Redirect Frontend component to add. Drag the Redirect component Frontend component to the 1/1 layout element you created in the previous step.
Select the Redirect Component Frontend component, then, in Component settings > Redirect settings, in the Redirect Target input field, enter the URL to which you want to redirect the user.
Click Publish changes.

Users will now be redirected from this page folder to the redirect URL set by you.

Remove the Redirect Frontend component

When you want to discontinue redirecting the users from this page folder, remove the component from the live page version. To do so, follow these steps:

From the Studio home page or from the left menu, go to Site builder.
Use the page folder list and the status sections to navigate to the page version where you want to remove the Redirect Frontend component. Then, hold the pointer over the page version and click the Edit icon: the page builder opens.
Hold the pointer over the Redirect Component Frontend component in the page layout and click the More > Delete icon.
Click Publish changes.