[TIL] 노마드코더 nextJS - 4 / API key 숨기기 / redirect, rewrite / nextjs mask

하하하하하하 

글이 날아갔다

완전 열심히 썼는데ㅣ...

 

API key 숨기기

 

api key가 노출이 되면 안되는 이유

- 하루 사용량 제한이 있는 경우

- 사용자들의 남용 우려 

- 모두가 개인 목적으로 사용하게 되면 사용에 제한이 걸릴 수도 있다

이런 것들이 있다. 

 

지금 그냥 이렇게 쓴 상태에서는 

네트워크 탭에서 

 

 

redirect와 rewrite

nextjs에선 request에 mask를 씌우는 redirect와 rewrite를 할 수 있다.

 

- redirect

유저가 contact로 가려고 하면 new-url로 보내는 거

 

next js는 pattern matching이 가능해서

:path를 해놓으면

유저가 contact/123 를 입력했을 때 new-url/123으로 보내준다!

:path/*을 하면

contact/ 뒤에 123/4145/ㅇㄹㄷ/ㄷㄷ 어떤 것들이 붙어도 다 

new-url/123/4145/ㅇㄹㄷ/ㄷㄷ 이 주소로 보내주는 것.

* 유저가 바뀌는 url을 볼 수 있다.

 

rewrite는 유저가 바뀌는 url을 볼 수 없다.

redirect랑 똑같이 배열을 리턴하고 그 안에 source랑 destination!

이렇게 하면 유저에게는

이렇게 보여진다구>__<

네트워크에서 봐도 똑같이 api/movies 로만 보여짐

index.jsx의 fetch에도 

이렇게 api/movies로 적어주면 됨

 

만약 config에 api key를 직접 쓰는 게 싫다면 .env 파일을 만들어서 해주면 됨!

 

끄읕..