[NEXTJS] api key 숨기기 nextjs rewrites

개요 - 숨겨야 하는 이유

보안.

클라이언트를 통해서 사용자들이 api와 key를 확인할 수 있음.

 

 

 

Next.js로 api 숨겨서 요청보내는 방법

nextjs rewrites 설정을 하면 됩니다. https://nextjs.org/docs/api-reference/next.config.js/rewrites

next.config.js: Rewrites | Next.js

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

 

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

//next.config.js
module.exports = {
	async rewrites () {
    	return [
        	{
            	source: 'api/movies',
                destination: `${BASE_URL}/movie/popular?api_key=${API_KEY}&language=en-US&page=1`
            },
        ]
    }
}

// api 호출 컴포너트
fetchData() {
	return fetch('api/movies').then(resolve => resolve.json());
}
export default function index () {
	const [movieList, setMovieList] = useState([]);
    useEffect(() => {
    	cosnt resp = fetchData();
	    setMovieList(resp.results);    	
    }, [])

	
	return (
    	//...
    )
}