[Next.js] redirect vs rewrite (ft. API key를 숨기는 방법?!)

오늘은 Next.js의 여러가지 기능들 중 하나인 redirect와 rewrite에 대해 알아보자!

redirect vs rewrite

• redirect & rewrite 기능을 적용해보려면 next.config.js 파일을 수정해야한다!

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  redirects() {
    return [
      {
        source: "/contact",
        destination: "/form",
        permanent: false,
      },
    ];
  }
};

module.exports = nextConfig;

1. redirect

• 기존에 작성되어져 있던 코드에서 redirects를 추가한 코드이다.
• 사용자가 어디론가 이동한다면 (source), 사용자를 여기로 보낼 것이다(destination) 라는 의미가 담긴 코드가 추가 된 것이다.
• 현재 코드만 봤을 때, 사용자가 /contact라는 경로로 접속했다면, 그 사용자를 /form 경로로 이동시키겠다 라는 의미이다.
• permanent 값은 redirection이 영구적인지(true) 아닌지(false)를 나타내는데, 이 값에 따라서 브라우저나 검색엔진이 정보를 기억할지 여부가 결정된다.

💡 next.config.js 파일을 수정한 뒤에는 서버를 재시작해야 변경된 내용이 반영되니 반드시 재시작한 뒤에 확인하자!

redirects() {
    return [
      {
        source: "/contact",
        destination: "https://velog.io",
        permanent: false,
      },
    ];
  }

• 애플리케이션에 속한 경로 뿐만 아니라 외부 타 사이트로의 이동도 가능하다. destination만 외부 링크로 설정해주면 사용자를 해당 사이트로 이동시킬 수 있다.

redirects() {
    return [
      {
        source: "/contact/:path",
        destination: "/form/:path",
        permanent: false,
      },
    ];
  }

• 패턴 매칭도 지원하기 때문에 위와 같이 /:path를 뒤에 덧붙여주면, /contact/1234로 이동한 사용자는 /form/1234로 이동하게 된다.

redirects() {
    return [
      {
        source: "/contact/:path*",
        destination: "/form/:path*",
        permanent: false,
      },
    ];
  }

• 맨 뒤에 * 표시를 붙이면 모든걸 catch 하겠다는 의미로, /contact/call/1234 로 사용자가 이동하면 /form/call/1234로 이동하게 된다는 것이다. 뒤에 어떤게 계속 붙어서 이어지든 다 캐치해서 이동시키겠다는 의미이다.

2. rewrite

• redirect와 rewrite의 큰 차이점은 경로의 이동이 사용자의 눈에 보이느냐 안보이느냐 이다. redirect는 url이 바뀌는 모습을 사용자가 눈으로 직접 볼 수가 있다. 확인이 가능하다. 반면에 rewrite는 url이 바뀌는 모습을 사용자가 눈으로 볼 수가 없다!

• rewrite는 사용자를 redirect 시키기는 하지만 url 자체는 변하지 않는다. 이런 경우는 API KEY를 숨기고 싶을 때 이 방법을 이용하면 효과를 볼 수 있을 것이다!

rewrites() {
    return [
      {
        source: "/api/snacks",
        destination: `https://불러올api주소?api_key=${API_KEY}`,
      }
    ];
  }

• 위와 같이 rewrites 코드를 next.config.js에 추가 해주고,

export async function getServerSideProps() {
  const { results } = await (
    await fetch("http://localhost:3000/api/snacks")
  ).json();
  return {
    props: {
      results,
    },
  };
}

• api를 불러올 때 위와 같이 fetch할 주소를 rewrite 코드에서 작성한대로 적어주면, API KEY를 노출 시키지 않고 데이터 fetch가 가능하다!
• 검사(inspect)-네트워크(Network) 탭에서도 API KEY가 담긴 구체적 주소 대신 그저 /api/snacks만 확인할 수 있다. Next.js에 의해 api 주소가 masking 된것이다.

💡 redirect 와 rewrite 모두 애플리케이션에서 필요한 경우에 잘 활용하면 정말 좋은 기능이 될 것 같다!_!