Next.js getServerSideProps 에서 페이지 이동 방법

문제 상황

회원가입시 약관동의 이후 회원 정보 입력 페이지 이동하는 상황에서 약관동의 없이는 회원정보 입력페이지에 접속시 약관동의 페이지로 이동시키려 했다.

getServerSideProps 는 페이지가 구성되기전 서버쪽에서 작업을 해주는 함수이므로 기존 클라이언트에서 사용되는 DOM 관련 메서드 나 routing 할 수 있는 메서드 등등 활용 할 수 없다.

만약 페이지 요청시에 들어온 쿼리정보를 토대로 적절여부를 따진 후에 지정된 페이지로 이동시키는 로직을 만들고자 할 때 getServerSideProps 페이지 이동은 제한적이다. (만약 페이지가 로드되고 쿼리정보를 확인해서 넘긴다면 어렵지 않겠지만 비효율적인 방법으로 보인다.)

구글링해서 답을 찾지 못하여 혹시나 해서 chatGPT 에게 답을 구해보니 적절한 방법을 제시해 주었다.

해결 방법

context 객체의 res 속성을 이용하여 HTTP 응답을 조작 HTTP 상태코드 3xx 로 지정하고 Location 헤더에 이동할 URL 을 주어 리다이렉션시키는 방식

• 일반 Next.js 에서 getServerSideProps 방식

export async function getServerSideProps(context) {
  // 페이지 이동
  context.res.writeHead(302, { Location: '/new-page' });
  context.res.end();

  // 빈 객체를 반환합니다.
  return { props: {} };
}

• next-wrapper 에서 getServerSideProps 방식

export  const  getServerSideProps  =  wrapper.getServerSideProps(() =>  async ({ res }) => {
    res.writeHead(302, { Location:  '/new-page' });
    res.end();

    // 빈 객체를 반환합니다.
    return { props: {} }
})

참고사항

페이지이동시에 사용자에게 메시지를 띄우거나 페이지 이동상황을 사용자에게 노출시키기가 어렵다.

chatGPT 가 제공한 방법중에서는 HTTP 헤더에 쿠키에 메시지를 담아 활용하는 방법, 애초에 경고메시지를 띄워주는 페
이지로 이동한 후 이후 로직처리 방식 정도를 제시했다. 그나마 활용한다면 후자를 택하겠지만

지금 문제에서는 사용자에게 메시지를 전달할 필요치 않은 상황이라 판단해서 사용하지는 않았다.