Next.js - Rewrites

Redirects를 공부하면서 아주아주 괜찮은 Rewrite의 소개를 해보려고 한다

물론 이번에도 노마드코더 니콜라스님의 강의를 참고하면서....(https://nomadcoders.co/nextjs-fundamentals/lobby)

Watch Now – 노마드 코더 Nomad Coders

 

How to Rewrites in Next.js ?🤔

Redircts는 특정 URL을 직접 입력하면 Redirect로 다른 URL로 이동시키는 기능이라면

Rewrites는 특정 URL을 직접 입력하면 다른 URL로 이동을 하지만 사용자에게는 마치 이동이 되지 않은 것 처럼 보여준다. 특정 URL을 Masking하면서 다른 URL을 보여주는 것이다.

 

이게 정말 좋았던 것이 외부 API 통신을 할 때 사용되는 Key의 관리가 용이해서 아주 좋았다.

 

개발을 하면서 API KEY 같은 것을 노출하기 쉽상인데 이 Rewrites를 사용한다면 API KEY를 Hide 할 수 있어서 여태껏 가지고 있던 고민을 한번해 속 시원하게 해결해 주는 느낌이였다.

 

또한 Next.js에서 외부 API를 호출할 때 발생하는 CORS 이슈를 처리하는데 한가지 방법중에 하나다.

 

next.config.js

next.config.js 파일에서 module.export Object안에 Redirects와 마찬가지로 async를 선언하고 함수를 선언하고 Return Array안에 source(사용할 주소), destination(실제 API 주소)를 지정해 주면 된다.

 

간단한 예로, 니콜라스님의 강의 영상에 있던 내용 Git Source를 확인하면 자세하게 알 수 있다.

 

nextjs-fundamentals/next.config.js at master · nomadcoders/nextjs-fundamentals (github.com)

먼저 next.config.js에 module.exports = {} 바깥쪽에 API_KEY를 선언해 준다.

이때 니콜라스님은 .env 파일안에 따로 API_KEY를 한번 더 빼주셔서 확실하게 git까지 관리하셨다.

 

그리고 rewrites 함수 안에 사용자 지정 API 주소를 입력하고(source) 해당 API 주소를 호출 할 때 실제 값을 불러오는 API 주소를 API_KEY를 붙여서 호출하게 만들어 준다.

 

이러면 axios나 fetch를 통해 '/api/movies'를 호출하면 지정된 destination 주소로 이동되기 때문에 사용자에게는 노출되지 않을 뿐더러 크롬 개발자 도구에서도 Key는 노출되지 않는다.

 

#2.2 Redirect and Rewrite (13:31) – 노마드 코더 Nomad Coders

크롬 개발자 도구에서 API KEY의 값은 보이지 않는다!!

위 내용은 /api/movies로 접속했을 때 API KEY를 노출하지 않고도 정상적으로 값이 나오는 것을 확인할 수 있다.

 

그 외 Redirects와 마찬가지로 헤더, 쿠키 및 쿼리가 일치할 때 Rewrites 방식이라든지 i18n 지원으로 Rewrites를 해주는 방식 등 여러가지 Rewrites 방식이 제공된다.

후기🙄

Rewrite는 API KEY를 보여주기 싫을 때 사용하는 아주 유용한 Method가 아닌가 싶다.

보통은 BackEnd의 API 통신을 통해서 특정 키를 사용하는 일이 거의 적지만 막상 다른 API를 사용할 때는 꼭 Key가 필요하므로 더더욱 좋지 않나 싶다.

 

항상 개발하면서 API KEY를 어떻게 외부에 노출 시키지 않을 수 있을까?? .env가 답인가? 라는 생각을 했었는데 이런 방법이 있다는 점이 정말 놀라웠다.

 

역시 더더욱 공부할 것은 많다고 생각한다.😂😂

 

 

 

출처 : https://nextjs.org/docs/api-reference/next.config.js/rewrites