next.js: Using writeHead to redirect in `getServerSideProps` fails on Safari

Bug report

Describe the bug

Using a Next Link component to route to a page where there is a check to see if a cookie is defined, and if so to redirect the user seems to fail on Safari.

// login.js

export async function getServerSideProps(ctx) {
  // Nookies parse cookies function to get the current cookies
  const cookies = parseCookies(ctx);

  if (cookies.token) {
    ctx.res.writeHead(303, { Location: "/admin" });
    ctx.res.end();
  }

  return { props: {} };
}

The Link component points to /login and is in the global navigation.

It seems that clicking on this on Safari changes the current path to /login however nothing happens.

On Chrome it seems that the page is properly redirected to /admin should the token cookie be defined.

Expected behavior

res.writeHead() behaves the same on Safari as it does on Chrome.

System information

  • OS: macOS Catalina 10.15.4 (19E287)
  • Browser (if applies) Safari Version 13.1 (15609.1.20.111.8)
  • Version of Next.js: 9.3.5
  • Version of Node.js: v14.0.0

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 1
  • Comments: 17 (9 by maintainers)

Most upvoted comments

i can confirm this issue on Safari and Edge as well. server-side redirections triggers the error page.

One workaround is to replace Link with a but this downgrades experience for all browsers

image

Happened to me too, here is the console error log

I think the same problem occurs with FireFox. I’ve followed this blog post to implement the same functionality, but a different way:

https://sergiodxa.com/articles/redirects-in-next-the-good-way/

This issue should be fixed with this PR that was just merged into canary: https://github.com/vercel/next.js/pull/16051