I've created a new Next.js app with the new app router enabled and I'm trying to create a login form that posts data to the backend without JS.
Given I have a simple form at /auth/page.js:
<form action="/auth/api" method="post">
<h1>Login with magic link</h1>
{error && (
<div>User cannot be found.</div>
)}
<label htmlFor="email">Email</label>
<input type="email" name="email" id="email" required />
<button type="submit">Send me a link</button>
</form>
And I have the following in my /auth/api/route.js:
export async function POST(req) {
// ...
if (!user) {
const url = new URL('/auth', req.url);
url.searchParams.set('not_found', 1);
return NextResponse.redirect(url);
}
}
Why the browser hangs on the redirect and stays in pending:
https://user-images.githubusercontent.com/356117/236607807-60533030-4cad-4040-8ea5-1e259034a07a.png
PS: I'm using this as a reference: https://nextjs.org/docs/app/api-reference/functions/next-response#redirect