[Next.js] redirect와 rewrite란?

API KEY 숨기기

보통 API KEY는 본인의 고유한 것이기 때문에 다른 사용자에게 노출되지 않도록 주의해야 한다. 노마드코드 강의를 통해 Redirect를 학습하면서 API KEY나 특정 경로를 감추기에 좋은 기능인 Rewrite 에 대하여 설명하고자 한다!

Redirect란?

redirect는 사용자가 변경된 path로 유입되면 새로운 경로로 안내하는데, 아래와 같이 next.config.js 파일을 수정해주면 된다. "/contact"라는 특정 경로를 직접 입력하면 "/form"이라는 새로운 경로로 redirect 되는 것을 알 수 있다.

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


module.exports = nextConfig

Rewrite란?

rewrite는 redirect처럼 경로 이동 기능을 수행하지만, 여기서 한가지 다른 점은 URL이 바뀌지 않은 상태로 이동한다는 점이다. 그렇기 때문에 API KEY 혹은 특정 경로를 숨기고 싶을 때 사용할 수 있다.

git 연동을 막기위해 .env 파일을 생성하여 API_KEY를 선언해주어야 한다.
이때, gitignore 파일 #vercel 부분에 .env 추가하는 것을 잊지말자.

# vercel
.vercel
.env

next.config.js

const API_KEY = process.env.API_KEY;

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

module.exports = nextConfig

index.js 에서도 fetch 설정한 경로로 변경해주어 API_KEY가 노출되지 않도록 해준다.

useEffect(() => {
    (async () => {
      const { results } = await (await fetch(`/api/movies`)).json();
      setMovies(results);
    })();
  }, []);