How to make redirects from the server side using NextJS?

Whether you recently changed the path of your articles from /blog/[article-slug] to articles/[article-slug], or you need to redirect a user to the login screen to authenticate prior to granting access to a page, learning how to do redirects on the server side is an effective way to avoid React doing unnecessary rendering on the client side.

In this article, I will show you how to do redirects from the server side using NextJS.

Solution 1 – Server Side redirects using getInitialProps or getServerSideProps

Whether you are using the getInitialProps or getServerSideProps for your server-side applications, you can make redirects by using the writeHead method provided by the res available in the context parameter.

export function Home() {
  return (
    <div>
      <main className={styles.main}>
        <h1 className={styles.title}>Home</h1>
      </main>
    </div>
  );
}

Home.getInitialProps = async (ctx) => {
  const { res } = ctx;

  res.writeHead(301, { location: '/hello' });
  
  res.end();
};

export default Home;

The previous example puts the logic inside the getInitialProps to redirect any user attempting to access the /home page to the /hello page from the server side.

Note: Notice it is not required to always use the HTTP status code 301, which means a permanent redirect. I recommend checking out the list of other HTTP redirection status codes and using whichever makes the most sense for your logic.

This will also work if you use getServerSideProps instead of getInitialProps like the following example.

export function Home() {
  return (
    <div>
      <main className={styles.main}>
        <h1 className={styles.title}>Home</h1>
      </main>
    </div>
  );
}

export const getServerSideProps = async (ctx) => {
  const { res } = ctx;

  res.writeHead(301, { location: '/hello' });

  res.end();
 
  return {
    props: {},
  };
};

export default Home;

Note: It is important to call res.end(); to immediately end the response process. Attempting to call the writeHead method not followed by the end method can lead to unexpected behaviors.

Solution 2 – Server Side redirects using getServerSideProps

If your NextJS app uses getServerSideProps, there is also another alternative to redirect from the server side. Instead of using the res.writeHead option mentioned above, you can return an object that contains the redirect key.

The redirect key contains an object with the destination and permanent properties.

• Use the destination (string value) property to define the URL you are redirecting the user to.
• Use the permanent (boolean value) property to define whether the redirect is permanent or a temporary redirect.

Check out the following snippet of code to see an example of a server-side redirect by returning an object containing the redirect key in the getServerSideProps.

export function Home() {
  return (
    <div>
      <main className={styles.main}>
        <h1 className={styles.title}>Home</h1>
      </main>
    </div>
  );
}

export const getServerSideProps = async () => {
  return {
    redirect: {
      destination: '/hello',
      permanent: false,
    },
    props: {},
  };
};

export default Home;