Next.js의 장점 Redirect와 Rewrite(url 숨기기)

API KEY 숨기기

보통 API KEY는 본인의 고유한 것이기 때문에 인터넷에 노출시키면 안된다. 그렇기 때문에 env 파일 안에 넣어서 작업한 후 깃에도 올라가지 않도록 항상 조심하는 것이 좋다. Next.js라서 가능한 Redirect와 Rewrite라는 것을 배웠는데 API KEY나 특정 경로를 감출 때 이 방법을 사용하면 되는 것 같다.

Redirect

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

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

module.exports = nextConfig

Rewrite

rewrite는 redirect처럼 리다이렉트 기능을 하지만 여기서 한가지 다른 점은 URL이 바뀌지 않은 상태로 이동한다는 점이다. 그렇기 때문에 API 키나 특정한 경로를 감추고 싶을 때 사용하면 된다.

const API_KEY = process.env.API_KEY;

const nextConfig = {
  reactStrictMode: true,
  async rewrites() {
    return [
      {
      	// source 주소를 입력하면 destination의 주소로 이동 but, 주소 url은 바뀌지 않음
        source: "/api/movies",
        destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`
      }
    ]
  }
}

module.exports = nextConfig