Redirection fails with Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

[fabien-h]

Here is my redirection code server side

export const getServerSideProps = async (
  ctx: GetServerSidePropsContext,
): Promise<unknown> => {
  const data: Data = { a: 10 };

  if (ctx.query.logged !== 'true') {
    ctx.res.setHeader('Location', '/app/login?redirected=true');
    ctx.res.statusCode = 302;
    ctx.res.end();
    return;
  }

  return {
    props: {
      data,
    },
  };
};

For the demo, the logged state is simply ?logged=true in the url.

Events

• When I reload the page /app?logged=true, I stay on the page.
• When I reload the page /app, I'm redirected to the login page
• When I come from another page with a <Link..., I get this error.

I'm not sure to understand why. There is a return after the res.end();

Is there a way to know if the call to the data is just the initial call or if it comes from the client ?

I tried to redirect client side, but next calls the data before I get a chance to do so.

I'm starting to think that the right way would be to have two components:

• One client side component with a loader that display a loader while the data are fetching and then the view when it's loaded
• On server side component that simple display the view with the data synchronously

Hint (or is it ?) : TypeError: Cannot convert undefined or null to object

When I reload the page /app, I'm redirected to the login page. BUT I get this error in the console server-side:

TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at renderToHTML (--web/node_modules/next/dist/next-server/server/render.js:39:78)
    at async --/web/node_modules/next/dist/next-server/server/next-server.js:68:285
    at async --/web/node_modules/next/dist/next-server/server/next-server.js:67:142
    at async DevServer.renderToHTMLWithComponents (--/web/node_modules/next/dist/next-server/server/next-server.js:91:254)
    at async DevServer.renderToHTML (--/web/node_modules/next/dist/next-server/server/next-server.js:92:254)
    at async DevServer.renderToHTML (--/web/node_modules/next/dist/server/next-dev-server.js:22:539)
    at async DevServer.render (--/web/node_modules/next/dist/next-server/server/next-server.js:48:236)
    at async Object.fn (--/web/node_modules/next/dist/next-server/server/next-server.js:35:852)
    at async Router.execute (--/web/node_modules/next/dist/next-server/server/router.js:28:28)
    at async DevServer.run (--/web/node_modules/next/dist/next-server/server/next-server.js:44:494)
    at async DevServer.handleRequest (--/web/node_modules/next/dist/next-server/server/next-server.js:13:133)

[fabien-h]

The type error is solved by adding a prop object after the ctx.res.end().

  if (!ctx.query.logged) {
    ctx.res.setHeader('Location', '/app/login?redirected=true');
    ctx.res.statusCode = 302;
    ctx.res.end();
    return { props: {} };
  }

I'm not sure why.

[paambaati]

I noticed the same issue, and I’m currently working around it by doing a client-side reduct, even though it isn’t ideal.

And about the TypeError — Next.js will always expect you to return props from your getServerSideProps, so returning them is a proper fix.

[paambaati]

#11281 (comment) is a much larger discussion of this same issue.

[karlhorky]

It seems the RFC by Tim is the way to go for the future: #14890

[karlhorky]

Edit: No need to use the solutions on this page anymore - instead use the built-in feature of Next.js to return an object with a key named redirect in getStaticProps or getServerSideProps: redirect in Data Fetching docs

Seems like this workaround by @samstr could offer a way until the RFC is ready (checking to see whether the referer is there):

pages/current-season.js

import { browserRedirect, serverRedirect } from 'utils/redirects';

const redirect = {
  href: '/seasons/[season]/matches',
  asPath: `/seasons/22/matches`,
  permanent: false,
};

export default browserRedirect(redirect);
export const getServerSideProps = async (ctx) => serverRedirect(ctx, redirect);

utils/redirects.js

import Router from 'next/router';
import React, { Component } from 'react';

export const browserRedirect = (redirect) => {
  return class Redirect extends Component {
    componentDidMount() {
      const { href, asPath } = redirect;
      Router.push(href, asPath); // Router.replace might be better here? not sure
    }

    render() {
      return <p>Redirecting...</p>;
    }
  };
};

export const serverRedirect = (ctx, redirect) => {
  const { referer } = ctx.req.headers; // if there's no referer then it was a server request
  const { asPath, permanent, external } = redirect;

  if (!referer || external) {
    res.setHeader('Location', asPath);
    res.statusCode = permanent ? 301 : 307;
  }

   return { props: {} };
};

Source: #11281 (comment)

[deschantkn]

Yeah it's probably something wrong with my code. The getServerSideProps is in a private page as it should be and I am redirecting to my login page when the user is not authenticated. It redirects to the login page successfully but getServerSideProps somehow keeps running from the previous page

[karlhorky]

Do you also have a getServerSideProps with a redirect in the login page? If so, maybe that's what's running?

[deschantkn]

I was definitely the one doing something wrong! I'm still not sure what I was doing wrong but after a good nigh't sleep the redirect seems to be working fine now. Thanks for your help though!

[ypresto]

It will cause timeout error on production. if (process.env.NODE_ENV !== 'development') ctx.res.end() to fix it.

At least in my environment with next v10.2.3 the workaround no longer needed, no ERR_HTTP_HEADERS_SENT error with res.end().
Moreover that workaround causes timeout in cypress (End-to-End) test.

[tlehwalder]

Is it possible to pass props or context to the redirected page?

This doesn't work:

return {
  redirect: {
    destination: '/info',
    permanent: false,
  },
  props: {
    message: "Some Info Message"
  }
}

[mamadfar]

I have the same problem when i move to a dynamic route
do someone solve this problem?!

[dungtran5]

The problem still exist 😢 .....

[iambherulal]

To fix this you can add return before res.status().send()

if (total > 0) {
  return res.status(200).send({
    status: 0,
    message: "Messages available",
  });
}
return res.status(503).send({
  status: 1,
  message: "Messages not available!",
});

Or you can use if..else in this particular code snippet.

if (total > 0) {
  res.status(200).send({
    status: 0,
    message: "Messages available",
  });
} else {
  res.status(503).send({
    status: 1,
    message: "Messages not available!",
  });
}

[bijaydas]

Is this issue solved? I am also facing the same issue

db.all(query, credentials, (err, rows) => {
    if (err) {
      return res.status(400).send({ err });
    }
    if (rows.length === 0) {
      return res.status(400).json({
        message: 'Invalid credentials',
      });
    }
    return res.status(200).json({
      message: 'Login success',
    });
  });