Next.js: Fixing a Blank Page Issue After res.redirect() in API Routes

In my Next.js project, I encountered an issue where calling res.redirect('/') in an API route resulted in a blank page on Vercel after the redirect. Surprisingly, this problem didn’t occur during local development. The URL was correct, but the content didn’t appear until a page refresh was performed.

To resolve this issue, I found that replacing res.redirect('/') with res.writeHead(302, { Location: '/' }).end() fixed the problem.

The res.writeHead(302, { Location: '/' }).end() code snippet uses the 302 Found HTTP code, which is commonly used for URL redirection. This change ensures that the redirect behaves as expected and displays the content immediately without requiring a page refresh.

By making this modification, I was able to successfully address the blank page issue caused by res.redirect() in my Next.js API route on Vercel.

tags: [“Next.js”, “API routes”, “HTTP code”, “URL redirection”]