NextJS | Rewrite

Rewrite?

Rewrites를 사용하면 들어오는 request 경로를 다른 destination 경로에 매핑할 수 있음
Rewrites은 URL 프록시 역할을 하고 destination 경로를 mask하여 사용자가 사이트에서 위치를 변경하지 않은 것처럼 보이게 함.
redirects은 새 페이지로 reroute되고 URL 변경 사항을 표시함.

Redirect와 Rewrite의 차이점

Redirect는 URL이 변경되면서 경로를 바꾸고, Rewrite는 URL이 변경되지 않으면서 경로가 바뀜.

/	경로	URL
Redirect	바뀜	바뀜
Rewrite	바뀜	안 바뀜

Rewrite 기본코드

const API_KEY = process.env.API_KEY;

const nextConfig = {
  reactStrictMode: true,
  
  ...
  
  async rewrites() {
    return [
      {
        source: "/api/movies",
        destination: `http://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
      },
    ];
  },
};

module.exports = nextConfig;

Rewrite를 사용해서 API Key를 숨기는 방법

1) .env 파일 생성해서 api key 입력

API_KEY = cd124d01880b35b0167250cac4dba58a

2) .env 파일 .gitignore에 추가

3) next.config.js에 API_KEY 정의

const API_KEY = process.env.API_KEY;

4) next.config.js에 rewrite 입력

async rewrites() {
    return [
      {
        source: "/api/movies",
        destination: `http://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
      },
    ];
  },