Error: NEXT_REDIRECT

Answered

Giant Angora posted this in #help-forum

Giant AngoraOP

2024-01-02T14:25:14.000Z

Hello there,

I am having the following error while trying to use the redirectfunction from next/navigation

Server Error
Error: NEXT_REDIRECT

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Here is my component:

import { type GetServerSidePropsContext } from "next";
import { getServerAuthSession } from "@/server/auth";
import { useSession } from "next-auth/react";
import { redirect } from "next/navigation";

export default function Dashboard() {
  const { data: session } = useSession();

  if (!session || !session.user) {
    redirect("auth/signin");
  }

  return (
    <>
      <h1>Protected Page</h1>
      <p>You can view this page because you are signed in.</p>
    </>
  );
}

export async function getServerSideProps(context: GetServerSidePropsContext) {
  return {
    props: {
      session: await getServerAuthSession(context),
    },
  };
}

Answered by @ts-ignore

I think you are using pages dir, if that's the case then redirect from next/navigation can't be used

View full answer

21 Replies

@Giant Angora Hello there, I am having the following error while trying to use the `redirect`function from `next/navigation` Server Error Error: NEXT_REDIRECT This error happened while generating the page. Any console logs will be displayed in the terminal window. Here is my component: import { type GetServerSidePropsContext } from "next"; import { getServerAuthSession } from "@/server/auth"; import { useSession } from "next-auth/react"; import { redirect } from "next/navigation"; export default function Dashboard() { const { data: session } = useSession(); if (!session || !session.user) { redirect("auth/signin"); } return ( <> <h1>Protected Page</h1> <p>You can view this page because you are signed in.</p> </> ); } export async function getServerSideProps(context: GetServerSidePropsContext) { return { props: { session: await getServerAuthSession(context), }, }; }

@ts-ignore

2024-01-02T14:26:39.000Z

I think you are using pages dir, if that's the case then redirect from next/navigation can't be used

Answer

Giant AngoraOP

2024-01-02T14:26:57.000Z

Oh okay, so what's the workaround here?

@Giant Angora Oh okay, so what's the workaround here?

@ts-ignore

2024-01-02T14:27:05.000Z

https://nextjs.org/docs/pages/api-reference/functions/get-server-side-props#redirect

Giant AngoraOP

2024-01-02T14:27:11.000Z

Kinda getting used to Next

@ts-ignore

2024-01-02T14:27:34.000Z

sorry this is for server side, for client side you've to use useRouter().replace

Giant AngoraOP

2024-01-02T14:27:38.000Z

Should I use useRouter?

@ts-ignore

2024-01-02T14:28:15.000Z

https://nextjs.org/docs/pages/api-reference/functions/use-router#routerreplace

Giant AngoraOP

2024-01-02T14:28:26.000Z

It will work with my Server Side component?

@ts-ignore

2024-01-02T14:28:31.000Z

make sure the import is from next/router

@Giant Angora It will work with my Server Side component?

@ts-ignore

2024-01-02T14:28:57.000Z

I am not sure, you should give it a shot first

its been quite long since I used pages dir

Ray

2024-01-02T14:29:20.000Z

export async function getServerSideProps(context: GetServerSidePropsContext) {
  const session = await getServerAuthSession(context)

  if (!session || !session.user) {
    return {
      redirect: '/auth/signin',
      props: {}
    }
  }

  return {
    props: {
      session,
    },
  };
}