[Next.js] rewrites 를 이용하여 API Key 숨기기
개발을 할 때, 외부의 API를 사용하기 위하여 나의 API Key의 정보를 같이 적어주어야 한다.
이것이 외부로 노출이 되는 것을 방지하기 위하여 각별히 신경을 써야한다. Next.js의 rewrites
를 이용하여 API Key 를 숨겨 볼 것이다.
아래의 코드는 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
Author And Source
이 문제에 관하여([Next.js] rewrites 를 이용하여 API Key 숨기기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@godud2604/Next.js-rewrites-를-이용하여-API-Key-숨기기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)