Next.js 05. Redirect 와 Rewrite

오늘은 API 데이터를 가져와 fetch 후 API KEY를 숨기기 위해 Redirect와 Rewrite를 써봤다.

영화정보 데이터를 상태로 관리하고, useEffect로 API를 호출한다.

API를 호출하는 과정에서 API KEY가 네트워크에 노출되는데,
이를 next.js가 마스킹(덮어쓰기?!) 해준다.

(리다이렉트는 주소가 노출되고 유저가 인식할 수 있다.)

다음은 next.config.js 파일에 사용한 두가지 함수이다.

Redirect의 사용법은 이러하다

source : '요청할 주소' 를 입력하면,
destination : '연결시켜줄 주소' 로 리다이렉트 된다.
permanent : '브라우저나 검색엔진이 이 정보를 영구적으로 기억하는지 여부'

또한 :path 를 적어주면 패턴매칭이 되어
:path에 입력된 정보를 그대로 가져와 리다이렉트 된다.

마지막에 * 적어주면 다 catch 해서 가져옴

다음으로 Rewrite의 사용법이다.

Rewrite도 마찬가지로 리다이렉트 시키지만,
유저가 URL의 변화를 볼 수 없다.

본래 fetch 이후에 API 링크와 API KEY가 있었지만

rewrite 함수를 사용해 /api/movies 로 덮어씌우고
실제로 요청하는 URL은 destination에 적어주었다.

API KEY와 같이 중요한 정보는 따로 관리하는 방법이 있다.

const API_KEY = process.env.APi_KEY; //변수 설정 후

.env (environment) 파일 생성 후
API_KEY = 흠냐흠냐

오늘은 여기까지!