[Next.js] rewrites 를 이용하여 API Key 숨기기

개발을 할 때, 외부의 API를 사용하기 위하여 나의 API Key의 정보를 같이 적어주어야 한다.
이것이 외부로 노출이 되는 것을 방지하기 위하여 각별히 신경을 써야한다. Next.js의 rewrites를 이용하여 API Key 를 숨겨 볼 것이다.

next.config.js | rewrites

아래의 코드는 themoviedb api를 가져와 호출한 것이다. 개발자 도구의 network 탭을 열어서 확인해보면 나의 API_KET 에 대한 정보가 노출되는 것을 확인할 수 있다.

즉, 클라이언트를 통해서 사용자들이 api와 key의 정보를 확인할 수 있어 보안 측면에서 좋지 않다.

export default function Home() {
  const [movies, setMovies] = useState()
  
  useEffect(() => {
    (async () => {
      const { results } = await (
        await fetch(
          `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`
        )
      ).json()
      setMovies(results)
    })()
  }, [])
  
  return (
  	...
  )
}

Next.config.js 에서 rewrites 설정을 하자.

rewrites 속성은 요청 경로를 다른 목적지의 경로로 매핑해주는 설정 객체를 배열로 가지는 Next.js 의 설정 속성이다.

rewrites 속성을 사용한다면, 유저가 url을 변경해서 요청할 수 없고 개발자가 의도한 경로로만 접근할 수 있다.

next.config.js

module.exports = {
  images: {
    domains: ['image.tmdb.org'],
  },

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

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

index.js 페이지에서 /api/movies 를 호출하면, https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY} 으로 매핑되어 사용자에게 api key가 mask 처리가되어 보이지 않게된다.

index.js

export default function Home() {
  const [movies, setMovies] = useState()
  
  useEffect(() => {
    (async () => {
      const { results } = await (
        await fetch(
          `/api/movies` // 이 부분을 rewrites 의 source에 있는 url과 동일하게 입력
        )
      ).json()
      setMovies(results)
    })()
  }, [])
  
  return (
  	...
  )
}

마찬가지로, 개발자 도구를 열어 network 탭에서 확인을 하면 /api/movies 으로 Url이 변경된 것을 확인할 수 있다.

REFERENCE

https://nomadcoders.co/nextjs-fundamentals/lectures/3447