The best way to implement redirects in Subsequent.js

Serps and customers alike don’t need to discover a web page that doesn’t exist or is incomplete. As a developer, it’s best to keep away from it as nicely as a result of it might scale back the variety of repeat visits to your web site and have an effect on how it’s listed by engines like google.

Subsequent.js is a well-liked framework that’s constructed on high of the React library, and comes with a bunch of helpful built-in options, one in every of them being dealing with redirects to keep away from such instances.

On this article, we are going to arrange an app and take a more in-depth take a look at alternative ways you may implement redirects in your Subsequent.js initiatives. I will even present code snippets for each configuration information and routes and clarify how they work in Subsequent.js.

Let’s get began.

What are redirects?

Redirects allow customers to switch an executed URL to a brand new URL or, to place it one other approach, to reroute an incoming request from one path to a different.

These are normally dealt with by the server through HTTP redire­ction standing codes (3xx), which can be understood by internet crawlers.

Redirects are incessantly utilized in conditions the place a bit of the positioning doesn’t exist or is beneath development, content material has been moved to a unique URL, the routing system has modified, customers are being redirected attributable to entry restrictions, or many different conditions.

Organising the Subsequent.js challenge

We will probably be utilizing create-next-app, which is an formally supported approach by Subsequent.js to arrange the event server we are going to use to check our redirect examples.

First, open up your terminal and run the command npx create-next-app test-app. It will create a brand new challenge folder the place all of the logic of the appliance will dwell.

Subsequent, change the working listing to the newly created folder by cd test-app after which run npm run dev to start out the event server.

Then, open your browser and navigate to https://localhost:3000 to view the dwell preview of the app.

Outlined routes

The commonest solution to create redirects in Subsequent.js is to make use of the subsequent.config.js file, which needs to be situated on the root stage of your product construction. If it’s not, create one and embody the next code:

module.exports = {
  async redirects() {
    return [
      {
        source: "https://blog.logrocket.com/",
        destination: '/welcome',
        permanent: true,
      },
    ]
  },
}

Within the snippet above, the supply property is the requested route, vacation spot is the route we need to redirect the person to, and everlasting controls whether or not or not we wish the redirect path to be cached for the consumer machine and engines like google.

Let’s create a brand new route for /welcome we used within the configuration. Within the root stage of the pages folder, create a brand new file, welcome.js, and embody the next code:

export default perform Welcome() {
  return <h1>Welcome web page</h1>;
}

Now, restart the event server by urgent Ctrl+C in your keyboard after which run; npm run dev to start out it once more. That is crucial for the adjustments we made in subsequent.config.js to take impact. Keep in mind to do that for additional examples within the article as nicely.

To check the redirect, open your browser and navigate to https://localhost:3000 once more. It’s best to now be robotically redirected to https://localhost:3000/welcome.

Slug matching

Subsequent.js helps accessing the slugs of the URL and configuring redirects for them. For this instance, let’s edit subsequent.config.js to this:

module.exports = {
  async redirects() {
    return [
      {
        source: '/draft/:slug',
        destination: '/blog/:slug',
        permanent: true,
      },
    ]
  },
}

To arrange the routes, go contained in the pages folder and create two new folders named draft and weblog, after which create the file article.js inside each of them.

Within the draft/article.js file, embody the next code:

export default perform Article() {
  return <h1>Supply route</h1>;
}

Within the weblog/article.js, embody the next code:

export default perform Article() {
  return <h1>Vacation spot route</h1>;
}

After restarting the dev server, strive accessing https://localhost:3000/draft/article and you may be redirected to https://localhost:3000/weblog/article. The slug might be any supported worth within the URL until you create a route for it and don’t nest it on a number of ranges.

Wildcards

To redirect nested routes you should utilize wildcards, which can primarily take the entire paths after the final identified stage and redirect to the brand new route. It is so simple as including a * character to the slug you’re concentrating on within the URL.

Change again to subsequent.config.js and alter it to this:

module.exports = {
  async redirects() {
    return [
      {
        source: '/draft/:slug*',
        destination: '/blog/:slug*',
        permanent: true,
      },
    ]
  },
}

So as to create nested routes, we should make a few subfolders contained in the draft and weblog folders. Let’s simply assume we need to categorize articles through applied sciences, so we are going to name each folders react. Inside each newly created folders, add the file tutorial.js.

In draft/react/tutorial.js, embody the next code:

export default perform Tutorial() {
  return <h1>Nested supply route</h1>;
}

In weblog/react/tutorial.js, embody the next code:

export default perform Tutorial() {
  return <h1>Nested vacation spot route</h1>;
}

Now, restart the dev server and entry https://localhost:3000/draft/react/tutorial. You ought to be instantly redirected to https://localhost:3000/weblog/react/tutorial. Discover that the entire nested path was redirected.

Regex queries

Regex is a robust software that you should utilize to entry totally different components of the URL path extra successfully. You’ll have extra management over redirect habits and will probably be allowed to create customized guidelines for redirects.

Change subsequent.config.js to the next code:

module.exports = {
  async redirects() {
    return [
      {
        source: '/draft/:slug(^[a-z]+)',
        vacation spot: '/weblog/article',
        everlasting: false,
      },
    ]
  },
}

Within the code snippet above, we configured solely the routes consisting simply of the a to z characters being redirected to the /weblog/article route, which we created earlier.

Navigate to the draft folder in your challenge construction and create a brand new file, article123.js, with the next code in it:

export default perform Article123() {
  return <h1>Supply route</h1>;
}

To check the regex question, restart the dev server and attempt to entry https://localhost:3000/draft/article. You can be redirected to https://localhost:3000/weblog/article, because the route consists simply of letters.

Now attempt to entry https://localhost:3000/draft/article123. You can be displayed the content material of the URL you entered and never be redirected trigger the route contains numbers.

Listed here are a few helpful websites that will help you write regex queries: regex101 and regexr.

Base path help

Subsequent.js additionally helps the prefix for the bottom path within the URL. This could be helpful if it’s important to set a number of redirects and don’t need to repeatedly write the bottom path for all of your routes.

Change the subsequent.config.js to the next code:

module.exports = {
  basePath: '/content material',

  async redirects() {
    return [
      {
        source: '/draft/article',
        destination: '/blog/article',
        permanent: true,
      },
      {
        source: '/draft/react/tutorial',
        destination: '/blog/react/tutorial',
        basePath: false,
        permanent: true,
      },
    ]
  },
}

Within the first redirect object, the supply grew to become /content material/draft/article and the vacation spot /content material/weblog/article, whereas within the second redirect object, the bottom path was ignored since we set basePath to false.

Request parameters

With Subsequent.js, you may have even additional management over redirects, accessing host, header, cookie, and question values. Utilizing the has area, you may write customized guidelines to manage whether or not the redirect needs to be carried out in several instances.

Change the subsequent.config.js to the next code:

module.exports = {
  async redirects() {
    return [
      {
        source: "https://blog.logrocket.com/",
        has: [
          {
            type: 'header',
            key: 'host',
            value: 'localhost:3000',
          },
        ],
        everlasting: false,
        vacation spot: '/welcome',
      },
    ];
  },
}

The sort have to be both header, cookie, or question. The key have to be a string from the chosen sort to match towards. The worth is optionally available and whether it is undefined, any values of the key will probably be matched.

Within the code snippet above, we used the header and checked towards the host key to have the localhost:3000 worth. If these values are met within the request, the redirect will probably be made.

Restart the dev server and attempt to entry https://localhost:3000. You can be redirected to https://localhost:3000/welcome, because the host worth matched.

Now shut the dev server with Ctrl+C and run npm run dev -- -p 8000. It will begin your utility on a unique port. Now entry your app on https://localhost:8000. This time you’ll not be redirected, because the host worth didn’t match your redirect configuration.

API redirects

Subsequent.js comes with a built-in approach of dealing with the API calls. You should utilize the redirect technique to carry out a redirect if a sure response is profitable. This may be actually useful when logging in customers, submitting varieties, and different use instances.

To create a brand new API route, navigate to the api folder inside pages and create a brand new file, knowledge.js, with the next code:

export default async perform handler(req, res) {
  console.log(`Identify: ${req.physique.title}`);
  strive {
    // some await stuff right here
    res.redirect(307, '/welcome');
  } catch (err) {
    res.standing(500).ship({ error: 'Error whereas fetching knowledge' });
  }
}

Then, navigate to the foundation stage of the pages folder and create a brand new file, kind.js, to create the shape itself. Embody the next code within the newly created file:

export default perform Kind() {
  return (
    <kind motion='/api/knowledge' technique='submit'>
      <label htmlFor="title">Your title:</label>
      <enter sort="textual content" id='title' title="title" />
      <button sort="submit">Submit</button>
    </kind>
  );
}

Now open your browser and navigate to https://localhost:3000/kind. You can be offered with the enter area to enter your title and submit button to ship the worth to the API. Enter any worth, submit it and you ought to be redirected to https://localhost:3000/welcome.

To ensure the API acquired the worth you entered, change again to the terminal and verify the printed logs. The worth needs to be displayed there.

getStaticProps and getServerSideProps

If you wish to set redirects through the built-in pre-render strategies of Subsequent.js, you may embody them in getStaticProps or getServerSideProps.

Utilizing getStaticProps, the web page will probably be pre-rendered at construct time (static web site technology).

To arrange an instance, navigate to the foundation stage of the pages folder and edit index.js:

export default perform Dwelling() {
  return <h1>Dwelling web page</h1>;
}

export async perform getStaticProps() {
  const content material = null;

  if (!content material) {
    return {
      redirect: {
        everlasting: false,
        vacation spot: '/welcome',
      },
    };
  }

  return {
    props: {},
  };
}

Equally, for server-side rendering (SSG), you’ll use getServerSideProps, which can be certain that Subsequent.js pre-renders the web page on every request.

To arrange the SSG instance, edit index.js as proven beneath:

export default perform Dwelling() {
  return <h1>Dwelling web page</h1>;
}

export async perform getServerSideProps() {
  const content material = null;

  if (!content material) {
    return {
      redirect: {
        everlasting: false,
        vacation spot: '/welcome',
      },
    };
  }

  return {
    props: {},
  };
}

To check both of the 2 instances, strive accessing https://localhost:3000, and you may be robotically redirected to https://localhost:3000/welcome because the redirect guidelines in getStaticProps or getServerSideProps had been executed.

Conclusion

On this article, we checked out a variety of methods how one can implement redirects in Subsequent.js. First, we used subsequent.config.js and wrote customized configurations for predefined routes, accessed single-level and nested routes, and used regex to extend the management of redirects.

Then, we additionally took a more in-depth take a look at how one can create redirects based mostly on the acquired request params. Lastly, we checked out how one can implement redirects utilizing the API routes and static web site technology versus server-side rendering.

I hope with this text you realized one thing new, and from this level onward it is possible for you to to create redirects for all your use instances in your future Subsequent.js apps.