[NextJs] redirect, rewrite 페이지 강제 이동시키기

redirect : 특정 url을 입력했을 때 지정된 다른 url로 이동시키는 기법

rewrite : redirect와 같은 역할을 하지만 사용자에게 url의 변경을 알리지 않고 내부적으로 이동시키는 기법

 

NextJs 프로젝트를 생성하고 next.config.js 파일을 보면 버전에 따라 차이는 있겠지만 아래와 같은 형태로 파일이 존재할 것이다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig

 

첫째로 redirect 기능을 사용하기 위해서 nextConfig 안에 redirects라는 함수를 추가해 주어야 한다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: "/old-path/",
        destination: "/new-path/",
        permanent: false,
      },
      {
        source: "/old-path-all/:path*",
        destination: "/new-path-all/:path*",
        permanent: false,
      },
    ];
  },
};

module.exports = nextConfig;

source : 이전 url

destination : source url로 요청이 들어올 경우 보내줄 새로운 url

permanent : 임시/영구 설정 (true : 영구)

그래서 permanent가 하는 일이 뭔데? 라는 생각에 nextjs 공식 사이트 문서를 보니 아래와 같이 설명되어있다.

source와 destination의 형태는 위에 작성된 두 번째 오브젝트처럼 뒤에 :path 혹은 :path* 을 붙여 줄 수 있다.

이렇게 작성하게 될 경우 /old-path-all/ 경로 아래에 붙는 모든 url을 통째로 redirect 시켜 줄 수 있다.

 

이제 rewrite를 살펴보도록 하겠다.

/** @type {import('next').NextConfig} */
const API_KEY = process.env.API_KEY;
const nextConfig = {
  reactStrictMode: true,
  async rewrites() {
    return [
      {
        source: "/api/testapi",
        destination: `https://api.test.org/apitest?api_key=${API_KEY}`,
      },
    ];
  },
};

module.exports = nextConfig;

전체적인 형태는 redirect와 같다. 차이점이라면 permanent의 유무정도?

 

redirect와 rewrite에 별 차이가 없어 보이는데 그냥 redirect 하면 되는 것 아닌가? 싶을 수도 있을 텐데,,

redirect의 경우 개발자 도구를 열어 네트워크 탭을 보면 요청하는 url과 파라미터 정보를 모두 확인할 수 있기 때문에 보안이 필요한 사항들에 대해 보호받을 수 없다.

 

작성한 코드를 보면 api 호출 용도로 작성한 것을 볼 수 있을 것이다.

외부 api를 사용할 경우 api key를 요구하는 경우가 일반적인데, 이를 위해 우리의 소스에 api key를 직접적으로 노출시켜 버리게 될 경우 보안적으로 아주아주아주 좋지 않다. (추후 큰 문제가 발생할 수도...)

 

그럴 때 rewrite 기능을 이용하여 api key를 노출하지 않고 숨길 수 있다 :)