Redirect issue with getserversideprops

[horlaarsco]

I'm trying to redirect in login page to the home page when the cookie that verifies authentication is found. when I use getserversideprops... Page redirects on first load but when i hit refresh of the login page again i get error of header sent.. screenshot below.

[marko-hologram]

From your question, I'm not entirely sure what you mean, but the first problem I notice in your screenshot is that you are using getServerSideProps inside a component file, which is something you cannot do.

https://nextjs.org/docs/basic-features/data-fetching#only-allowed-in-a-page-2

If you take a look in the docs here, you will notice it says it can only be exported from a page file, so that's the first thing I would update in your example.

[marko-hologram]

Hmm to be honest I'm not sure why it's failing. I just tested it locally with a small code example and it works. Are you maybe handling some server side props in the global _app or _document which might clash with the logic you have here?

This is the small example I used, basically the same as your code.

import cookie from 'cookie';
import Head from 'next/head';
import Link from 'next/link';
import { useEffect } from 'react';

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
  var expires = 'expires=' + d.toUTCString();
  document.cookie = cname + '=' + cvalue + ';' + expires + ';path=/';
}

export default function Login({ name = '' }) {
  useEffect(() => {
    setCookie('TEST_COOKIE', true);
  }, []);

  return (
    <div className="container">
      <Head>
        <title>Login Page</title>
      </Head>

      <h1>Hello {name}</h1>
      <Link href="/" as="/">
        <a>Index</a>
      </Link>
    </div>
  );
}

export const getServerSideProps = async ({ req, res }) => {
  const cookies = cookie.parse(req.headers.cookie ?? '');
  if (cookies['TEST_COOKIE']) {
    res.writeHead(302, { Location: '/' });
    res.end();
    return { props: {} };
  }

  return { props: { name: 'Test' } };
};

[horlaarsco]

I'm handling some in the _app.js with getInitialProps.. As getserversideprops doesn't work there

[marko-hologram]

Are you maybe doing res.end() there or something else?

Because the error message "...write after end" means that you tried to write something to the response after the response has ended, so your res.writeHead() is executed too late.

[horlaarsco]

[Felipithstdr]

Where do I put this code you made?

[timneutkens]

Opened a RFC here: #14890