[Next.js] Redirect 처리하는 방법 5가지

Next.js에서 대응이 되어 있지 않은 `/` path로 진입했을 때 default `/home` page로 redirect 하는 스펙을 구현해야 한다.

Redirect 시 사용하는 상태코드

Next.js에서의 redirect 를 구현하기 전 redirect 시에 서버에서 반환하는 상태코드를 먼저 살펴보자.

300번 대의 상태코드는 모두 Redirection 을 의미하며, 300 ~ 308 까지 있다.

 

• 301 (Moved Permanently) : 클라이언트의 요청 메소드를 GET 으로 바꾸며, redirect 처리가 캐싱된다.
• 302 (Found - Moved Temporarily) :  클라이언트의 요청 메소드를 GET 으로 바꾸며, redirect 처리가 일시적이고 캐싱되지 않는다.
• 304 (Not Modified) : 마지막 요청 이후 응답이 바뀌지 않았을 때 
• 307 (Temporary Redirect) : 클라이언트의 요청 메소드를 바꾸지 않으며, redirect 처리가 일시적이고 캐싱되지 않는다.
• 308 (Permanent Redirect) : 클라이언트의 요청 메소드를 바꾸지 않으며, redirect 처리가 캐싱된다.

 

304를 제외하고 (301과 308), (302와 307)이 닮아있는데 클라이언트의 요청 메소드를 바꾸느냐 아니냐에 따라 구분된다.

Next.js 에서 Redirect 처리하는 방법

Next.js 에서 redirect 를 처리하는 방법은 3가지가 있다.

 

next.config.js 파일에서 redirects 함수를 세팅한다.

공식 사이트에 기재되어 있는 방법으로 next config 파일에 redirects 필드를 추가하여 사용한다.

module.exports = {
  async redirects() {
    return [
      {
        source: '/',
        destination: '/home',
        permanent: true,
      },
    ]
  },
}

 

source 로 들어온 유저를 destination 으로 redirect 시켜주며, Parmanent 를 true로 세팅하면 308 상태코드를 / false로 세팅하면 307 상태코드를 사용한다. 클라이언트의 요청 메소드를 그대로 유지하기 위해 301, 302는 사용하지 않는다. dynamic path를 대응하기 위해 와일드카드를 사용하거나, regex 를 사용하거나, 심지어 쿠키나 헤더, 쿼리의 상태에 따라 redirect 가 동작하도록 세팅할 수도 있다. 자세한 내용은 공식 문서를 참조하자.

 

 

페이지 컴포넌트 파일의 클라이언트 코드 상에서 next router의 함수로 이동한다.

2-1. next.js 버전 13 이상일 경우

공식 사이트에 기재되어 있는 것처럼 버전 13 이후에 생긴 next/navigation 의 redirect 함수를 이용할 수 있다.

import { redirect } from 'next/navigation';

export default function Default() {
  redirect('/home');
  // permanentRedirect('/home');
}

이 또한 307 상태코드를 사용하며, permanentRedirect 를 이용하면 308 상태코드를 사용하게 된다.

 

2-2. next.js 버전 13 미만일 경우

공식 사이트에 기재되어 있는 것처럼 버전 13 이전의 경우 next/router 의 replace 함수를 이용할 수 있다.

import { useRouter } from 'next/router';
 
export default function Default() {
  const router = useRouter();
  router.replace('/home');
  return null;
}

 

`/` path에 해당하는 페이지 컴포넌트인 `pages/index.js` 를 만든 후 해당 페이지에서 router.replace 함수를 이용하면 된다. 이 경우 서버가 redirect 결과를 반환한 것이 아닌 클라이언트에서 GET 요청을 2번 한 것이 된다.

 

페이지 컴포넌트 파일의 서버 코드 상에서 ctx.res 를 이용하여 이동한다.

페이지 컴포넌트의 getServerSideProps 나 getStaticProps 함수 내부에서 ctx.res 를 이용하면 클라이언트 사이드에 도달하기 전에 redirect 시킬 수 있다.

const NotFound = () => {
  return null;
};

export async function getServerSideProps({ res }) {
  res.writeHead(302, { Location: '/home' });
  res.end();

  return {
    props: {}, // you can return props if needed
  };
}

export default NotFound;

 

App.tsx 의 getInitialProps 에서 ctx.res 를 이용하여 이동한다.

App.getInitialProps = async ({ ctx }: AppContext) => {
  const { res } = ctx;
  res?.writeHead(307, { Location: '/404' });
  res?.end();
  return {};
}

하지만 getInitialProps 는 함수 호출 시점이 명확하지 않은 Legacy API이므로 되도록이면 사용하지 않는 것이 좋다. (공식 문서 참고)

 

클라이언트 서버 코드에서 res.redirect 를 이용하여 이동한다.

import express from 'express';

const app = express();

app.get('/', (_, res) => {
  res.redirect(307, '/home');
});

 

총정리 & 추천

1. next.config.js 세팅 ✅
2. 페이지 컴포넌트 코드 상에서 이동 -> Redirect 로 표시되지 않으므로 사용하지 않는 것이 좋다.
3. getServerSideProps / getStaticProps 에서 이동 ✅
4. getInitialProps 에서 이동 -> Legacy API 이므로 사용하지 않는 것이 좋다.
5. 클라이언트 서버 코드에서 이동 ✅

 

1, 3, 5번이 모두 설정되어 있을 경우 5 > 1 > 3 의 우선순위로 적용된다.

Redirect 는 웬만하면 기존 페이지의 영향이 있기 전에 수행되는 것이 좋기 때문에 우선순위 순으로 적용하는 것을 추천한다. 하지만 1의 경우 상태코드를 301, 302 로 지정할 수 없음을 유의해야 한다.

 

더해서 SEO에 관하여 301을 상태코드를 사용하면 기존 URL과 새로운 URL을 동일시하여 권한 및 관련성 유지에 도움이 된다. 하지만 꼭 301를 사용해야 하는 것이 아니라 각 상황에 맞는 상태코드를 사용하는 것이 중요하다.