#How do I create regular non-JS form with redirect

3 messages · Page 1 of 1 (latest)

latent sand
#

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

API Reference for NextResponse.

feral juniper
#

Yeah, I'm stuck on this too.

feral juniper