[NextJS] 로그인 판별하여 페이지 리다이렉트 시켜주기 .with GetServerSideProps

Q. 로그인된 유저는 로그인 페이지에 못오게 해주세요.

사이드 프로젝트 진행도중 로그인페이지에 로그인 되어있는 유저가 접근할때 메인페이지로 리다이렉트 시키는 기능이 필요하였다.

처음에는 useEffect로 기능을 구현해보았는데 그렇게되면 로그인페이지에 접근한 뒤에 리다이렉트가 되어버렸다.

로그인된 사용자가 로그인 페이지를 볼수있는 점에서 페이지 렌더링이 되기전에 리다이렉트를 시킬수 있는 방법을 찾아보았다.

 

A. getServerSideProps로 리다이렉트

NextJS에서는 getServerSideProps를 사용하면 해당 페이지가 렌더링되기전에 리다이렉트를 시켜줄수있었다.

 

공식문서에 적혀있는걸 간략하게 보고가자.

getServerSideProps는 서버 측에서만 실행되며 브라우저에서는 실행되지 않습니다.

이 페이지를 직접 요청하면 요청 시간에 실행되며 이 페이지는 반환 된 props로 미리 렌더링됩니다.

next/link 또는 next/router를 통한 클라이언트 측 페이지 전환에서 이 페이지를 요청하면 Next.js가 실행되는 서버에 API 요청을 보냅니다.

내가 이해하기로는 클라이언트 페이지가 렌더링 되기전에 api요청을통해 데이터를 먼저 가져오거나 다른 자원들을 사용할수있다고 이해하였다.

 

주의할점은 getServerSideProps함수는 pages폴더에 있는 컴포넌트들에게만 사용이 가능하다는 점을 주의하자.

 

사용법

빠르게 코드로 알아보자

 

폴더구조는 다음과같다.

├─pages
    │  ├─auth
    │  └─index.tsx

 

pages/auth/index.tsx

 

본인은 로그인시 쿠키에 토큰이 저장되기때문에 로그인 판별을 쿠키로 하였다.

각자의 방법으로 로그인을 판별한다음

리다이렉트를 시키고 싶은 url을 destination에 지정해주면 된다.

import { GetServerSideProps } from 'next';
import React from 'react';

//getServerSideProps 사용
export const getServerSideProps: GetServerSideProps = async ({ req }) => {

  //로그인판별
  const isLoggedIn = req.cookies['X-AUTH-TOKEN'] ? true : false;
  
  //이미 로그인된 사용자일경우 메인페이지로 리다이렉트
  if (isLoggedIn) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    };
  }

  return {
    props: {},
  };
  
};

const index = () => {
  return <div>로그인페이지</div>;
};

export default index;

코드에서는 다음부분이 리다이렉트 시켜주는 부분이다.

destination에 이동할 페이지 경로를 넣는다.

 

permanent 옵션은 http redirect완료 응답을 307응답인지 308응답인지 결정해주는 부분이다.

307응답이면 false 308 응답이면 true로 해주면된다.

return {
  redirect: {
    destination: '/',
    permanent: false,
  },
};

https://nextjs.org/docs/api-reference/next.config.js/redirects

next.config.js: Redirects | Next.js

 

https://nextjs.org/docs/api-reference/data-fetching/get-server-side-props

Data Fetching: getServerSideProps | Next.js