Redirect is not working in server. Error: NEXT_REDIRECT (v14)

Unanswered

Giant Angora posted this in #help-forum

Giant AngoraOP

2023-12-28T10:08:08.000Z

import { auth } from "@/firebase";
import { signInWithEmailAndPassword } from "firebase/auth";
import { NextApiResponse } from "next";
import { redirect } from "next/navigation";
import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest, res: NextApiResponse) {
try {
const data = await req.json();
const { email, password } = data;
// // Start: Firebase action
// const userCredentials = await signInWithEmailAndPassword(
// auth,
// email,
// password
// );
// const user = userCredentials.user;
// console.log(user)
// End: Firebase action
redirect('/feed')

} catch (error: any) {
return NextResponse.json(
{
error: error.message,
},
{
status: 500,
}
);
}
}

51 Replies

risky

2023-12-28T10:34:13.000Z

redirect works by throwing special error, so you either have to rethrow it or not have it in try catch

Giant AngoraOP

2023-12-28T11:28:23.000Z

can you code that plz

@risky

Ray

2023-12-28T12:14:12.000Z

import { auth } from "@/firebase";
import { signInWithEmailAndPassword } from "firebase/auth";
import { NextApiResponse } from "next";
import { redirect } from "next/navigation";
import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest, res: NextApiResponse) {
  try {
    const data = await req.json();
    const { email, password } = data;
    // // Start: Firebase action
    // const userCredentials = await signInWithEmailAndPassword(
    //   auth,
    //   email,
    //   password
    // );
    // const user = userCredentials.user;
    // console.log(user)
    // End: Firebase action
    redirect("/feed");
  } catch (error) {
    if (error instanceof Error) {
      if (error.message === "NEXT_REDIRECT") throw error;

      return NextResponse.json(
        {
          error: error.message,
        },
        {
          status: 500,
        }
      );
    } else if (typeof error === "string") {
      return NextResponse.json(
        {
          error,
        },
        {
          status: 500,
        }
      );
    }
  }
}

Giant AngoraOP

2023-12-28T15:24:50.000Z

@Ray it should redirect to "/feed". Rather it is successfully logging in but not redirecting

Ray

2023-12-28T15:37:17.000Z

oh didn't notice thats a route handler

import { auth } from "@/firebase";
import { signInWithEmailAndPassword } from "firebase/auth";
import { NextApiResponse } from "next";
import { redirect } from "next/navigation";
import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest, res: NextApiResponse) {
  try {
    const data = await req.json();
    const { email, password } = data;
    // // Start: Firebase action
    // const userCredentials = await signInWithEmailAndPassword(
    //   auth,
    //   email,
    //   password
    // );
    // const user = userCredentials.user;
    // console.log(user)
    // End: Firebase action
    return NextResponse.redirect("/feed", {status: 302});
  } catch (error) {
    if (error instanceof Error) {
      return NextResponse.json(
        {
          error: error.message,
        },
        {
          status: 500,
        }
      );
    } else if (typeof error === "string") {
      return NextResponse.json(
        {
          error,
        },
        {
          status: 500,
        }
      );
    }
  }
}

Giant AngoraOP

2023-12-28T15:39:21.000Z

@Ray

Ray

2023-12-28T15:39:52.000Z

return NextResponse.redirect(new URL("/feed", req.nextUrl), {status: 302});

Giant AngoraOP

2023-12-28T15:41:07.000Z

@Ray Still the same, you can see the netwrok tab, redirect to feed..... But in browser it is not redirecting

Ray

2023-12-28T15:41:27.000Z

use 302 instead of 303

Giant AngoraOP

2023-12-28T15:41:59.000Z

same!

ðŸ¥²

@Ray

Ray

2023-12-28T15:42:48.000Z

you should handle it on client side

const res = await axios.post()
if (res.redirected) {
   router.push("/feed")
}

Giant AngoraOP

2023-12-28T15:47:34.000Z

but why it is doing this, as It is working fine

any idea?

Ray

2023-12-28T15:50:18.000Z

fetch returns the data to be handled by JavaScript without causing the browser to navigate at all (although you don't do anything with the return value of fetch).

Giant AngoraOP

2023-12-28T15:51:00.000Z

But I made a request in postman on the same API, it returns the /feed response as HTML

it is getting response

Ray

2023-12-28T15:51:31.000Z

because postman not submitting with fetch

so what is your issue?

Giant AngoraOP

2023-12-28T15:52:36.000Z

it is getting /feed as response and logging in successfully, but not redirecting

Ray

2023-12-28T15:52:49.000Z

because the endpoint return redirect to the response, so postman get the html

Giant AngoraOP

2023-12-28T15:52:50.000Z

You can see in the browser network tab as send earlier

Ray

2023-12-28T15:53:09.000Z

have you do this?

Giant AngoraOP

2023-12-28T15:53:56.000Z

I was doing the same before, it was redirect. But this is using client side. I have to redirect using server side

Basically, I refactored the code from client to server

Ray

2023-12-28T15:54:37.000Z

so how does your code look like now?

how do you submit the form?

Giant AngoraOP

2023-12-28T15:54:58.000Z

const onSubmit: SubmitHandler<{
    email: string;
    password: string;
  }> = async ({ email, password }) => {
    try {
      // show loader
      showLoader();
      // hit api request for login
      await axios.post("/api/auth/login", {
        email: email,
        password: password,
      });
      // show success message
      toast({
        variant: "default",
        description: "Logged in successfully!"
      });
    } catch (error: any) {
      // show error message
      toast({
        variant: "destructive",
        title: "Uh oh! Something went wrong.",
        description: error.message,
      });
    } finally {
      // hide loader
      hideLoader();
    }
  };

Ray

2023-12-28T15:55:23.000Z

you are submitting with axios(fetch)

so you need to do this

Giant AngoraOP

2023-12-28T15:56:11.000Z

so if I use fetch() what do I need to do?

this is client side redirection

Ray

2023-12-28T15:57:14.000Z

use server action instead of axios/fetch then

Giant AngoraOP

2023-12-28T15:57:45.000Z

Please can you give me the starter code for that

Ray

2023-12-28T15:58:07.000Z

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations

Giant AngoraOP

2023-12-28T15:59:05.000Z

Ray

2023-12-28T15:59:40.000Z

no, you can't just add 'use server'

btw, I don't think it would work with
import { signInWithEmailAndPassword } from "firebase/auth";

I think you got error with route handler too right?

so you have to comment it out

Giant AngoraOP

2023-12-28T16:00:30.000Z

No, it is doing the same,

logging in but not redirecting

Ray

2023-12-28T16:00:48.000Z

oh ok

use server action then

Giant AngoraOP

2023-12-28T16:01:37.000Z

I think it will take time to resolve until then I will use router.push

Anyways, thanks for helping. ðŸ«‚

Ray

2023-12-28T16:04:16.000Z

yeah, what you need to do is
1. convert the route handler to server action
2. change onSubmit to action props on the form element