# Creating a redirect component

The [**Redirects**](/frontend-studio/redirects-in-the-studio.md) 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](/frontend-studio/using-components-in-the-studio.md#add-a-frontend-component-schema).

```json title="Redirect component schema"
{
  "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](/frontend-development/client-side-redirect-component.md#create-the-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:

```tsx title="React component to redirect the user"
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:

```tsx title="React component to redirect the user"
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:

```tsx title="Register the Redirect Frontend component"
// 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](/frontend-studio/page-versions.md) of the [page folder](/frontend-studio/page-folders.md) 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:

1. From the Studio home page or from the left menu, go to **Site builder**.

2. 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](/frontend-studio/using-the-page-builder.md) opens.

3. Add a **1/1** layout element to the **MAIN** [layout section](/frontend-studio/using-the-page-builder.md#layout-section).

4. Use the [**Components** pane](/frontend-studio/using-the-page-builder.md#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.

5. 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.

   ![The Redirect Component selected with the Redirect settings expanded](https://docs.commercetools.com/frontend-development/images/redirect-component-in-page-builder.png)

6. 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:

1. From the Studio home page or from the left menu, go to **Site builder**.

2. 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](/frontend-studio/using-the-page-builder.md) opens.

3. Hold the pointer over the **Redirect Component** Frontend component in the page layout and click the **More > Delete** icon.

4. Click **Publish changes**.

## Related pages

- [Area overview page with navigation](/frontend-development.md)
- [Previous page: Client-side routing for dynamic pages](/frontend-development/client-side-routing-for-dynamic-pages.md)
- [Next page: Creating a full viewport component](/frontend-development/creating-a-full-width-component.md)