[Next.js]を使用して隠しAPIキーを書き換える

開発の際、外部APIを使うために、私のAPI鍵の情報を一緒に書く必要があります.
この露出を防ぐために特に注意しなければならない.Next.jsのrewritesを使用して、APIキーが非表示になります.
next.config.js | rewrites
次のコードはthemoviedb apiをインポートすることによって呼び出されます.開発者ツールのnetworkTabを開くと、私のAPI KETの情報が暴露されていることがわかります.
すなわち、ユーザは、クライアントを介してapiおよび鍵の情報を表示することができ、これはセキュリティの面で望ましくない.

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属性には、要求パスを他の宛先パスにマッピングする設定オブジェクトを配列として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は変わらない)

Rewrite들어오는 request 경로다른 destination 경로매핑

RewriteURL 프록시 역할,destination 경로를 mask,사용자가 사이트에서 위치를 변경하지 않은 것처럼 보이게.

index.jsページで/api/moviesが呼び出されると、https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}にマッピングされ、apiキーが見えずにマスク処理が行われる.

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