React - Next js Redirects, Rewrites 알아보기

Next JS에서 next.config.js 파일을 조작하는 법 중

Redirects와 Rewrites를 알아보자.

Next App 에서 next.config.js 파일을 가서 본다.

 

처음에는 reactStrictMode: true만 있을 텐데

아래와 같이 redirects함수를 async로 선언한다.

 

 

source : '입력주소'

destination : 'source 주소 입력하면 이동할 주소'

premanet : true/false 캐싱 여부

 

source 주소 입력 -> destination 주소

이런 구조다.

 

서버를 실행하고

 localhost:3000/hello를 입력하고 엔터를 누르면

이렇게 짠하고 /hello가 아닌 /bye로 향하게 된다.

 

이게 redirects다.

source에 따라 원하는 destination으로 내가 맘대로 조종할 수 있다.

---

이번엔 rewrites다.

 

redirect와 같이 source와 destination을 입력하는 건데

좀 더 응용해서 데이터를 불러오는 걸로 바꿔보자.

 

API_KEY를 .env 파일에 숨겨놓고

/api/movies로 가면 api에서 데이터를 불러오는 걸로 destination을 선언해주었다.

 

그리고 이제 source 주소로 들어가면

위와 같이 json 파일이 쫙 뜬다.

 

이게 정말 좋은 점이 아래와 같다.

 

json 데이터를 fetch하려고 할 때 굳이 주소를 다 쓰지 않고 간단하게 표현할 수 있다.

 

rewrites를 활용해서 정리를 해놨기 때문에 가능한 것

 

그리고 사용자 입장에서는 config.js 파일에서 source루트만 볼 수 있기 때문에

나의 작업경로를 숨기는 데도 용이하다.

 

API_KEY와 API를 불러오는 경로를 숨기기에 redirects와 rewrites는 참 좋은 기능이다.