본문 바로가기
목차
[노트장] 적으며 정리해 보는 이론/Next Js

[Next.js][redirect 에러] 리디렉션한 횟수가 너무 많습니다.

by 졸린부엉이 2024. 5. 18.

[문제]

로그인을 유무에 따라 로그인, 회원가입 페이지의 제한을 두기위해 redirect 작업을 하고 있는데, 

리디렉션한 횟수가 너무 많다고 에러가 떴다 ㅠㅠ

 

 

 

[에러가 난 이유]

찾아보니 에러나 난 이유는 무한루프에 빠져서 생긴 에러라고 한다 ㅠㅠ

console.log로 보니.. 많이 나온다..

 

 

 

 

 

[에러의 원인]

http://localhost:3000/signin 쿠기가 없어서 로그인 페이지로 이동했는데, 로그인 상태를 확인하는 과정에서 이미 /signin에 있지만 또 /signin로 보내고 를 반복하다 보니.. 에러가 났다.

 

export async function getServerSideProps(context: GetServerSidePropsContext) {
  const { req } = context;
  if (!req) return { props: {} }; 

  if (req.headers.referer) {  // 내부 접속
    if (req.headers.cookie) {
      console.log('내부 , 쿠키있다');
      return {
        redirect: {
          destination: req.headers.referer,
          permanent: false,
        },
      };
    }
  }
  
  if (!req.headers.referer) { //외부 접속
    if (req.headers.cookie) {
      console.log('외부 , 쿠키있다');
      return {
        redirect: {
          destination: '/',
          permanent: false,
        },
      };
    }
  }


// 쿠키 없을때 기본
return {  <<== 여기가 문제였다. 
  redirect: {
    destination: '/signin',
    permanent: false,
  },
};


}

 

 

 

 

 

 

[에러의 해결]

로그인 유무를 판단하여 /signin에 보냈으니, /signin페이지에서는 /signin페이지로 redirect를 안하면 된다!

export async function getServerSideProps(context: GetServerSidePropsContext) {
  const { req, resolvedUrl } = context;
  if (!req) return { props: {} };

  const isSigninPage = resolvedUrl === '/signin';

  if (req.headers.referer) {
    // 내부 접속
    if (req.headers.cookie) {
      return {
        redirect: {
          destination: req.headers.referer,
          permanent: false,
        },
      };
    }
  }
  if (!req.headers.referer) {
    //외부 접속
    if (req.headers.cookie) {
      return {
        redirect: {
          destination: '/',
          permanent: false,
        },
      };
    }
  }

  // 쿠키가 없고, 현재페이지가 '/signin'가 아니면 실행
  if (!req.headers.cookie && !isSigninPage) {
    return {
      redirect: {
        destination: '/signin',
        permanent: false,
      },
    };
  }

  return { props: {} };
}