next redirect, rewrite 뭔데 다쓰는거야? - redirect와 rewrite를 알아보자

next redirect와 rewrite를 사람들이 많이 사용하는데 이 기능들은 무슨 기능들을 하는것일까?

두 기능 다 브라우저에서 접속이나 네트워크 요청을 보낼때 특정 path에 접근했을때 다른 path를 보여주게 하는 기능이다 하지만 두 기능은 약간씩 다르다

차이점

redirect는 특정 path에 접근한다면 다른 path로 바꿔치기 하고

rewrite는 특정 path에 접근하면 path는 그대로지만 다른 path의 내용을 보여주는 기능이다

 

말로 설명하니까 내가 봐도 이해가 안된다 직접 사용하면서 설명을 해주겠다

사용법

두 기능 다 next.config.js 라는 next 설정 파일에서 기능들을 추가해 사용 할 수 있다

 

redirect

redirect는 react-router에 Navigate 컴포넌트와 같다고 생각하면 된다

 

/** @type {import('next').NextConfig} */
const nextConfig = {
  redirects: async () => [
    {
      source: "/redirect",
      destination: "/",
      permanent: true,
    },
  ],
};

module.exports = nextConfig;

 

위와 같이 정의 할 수 있다

source에 /redirect에 접속한다면 destination의 /로 이동해 보여지게 되는것이다

permanent option은 필수이지만 중요한 option은 아니여서 따로 설명하지는 않겠다

 

궁금하다면 공식문서를 찾아보기를 바란다

 

rewrite

rewrite는 proxy라고 생각하면된다 예를 들어 /rewrite에 접속하면 url은 /rewrite 이지만 실제 보여지는것은 다른 path의 내용이다

 

/** @type {import('next').NextConfig} */
const nextConfig = {
  rewrites: async () => [
    {
      source: "/rewrite",
      destination: "/",
    },
  ],
};

module.exports = nextConfig;

 

브라우저에서 /rewrite 에 접속하면 url은 /rewrite 이지만 실제 보여지는 것은 /의 내용이다

 

rewrite는 이뿐만 아니라 api key 마스킹과  cors 에러를 해결 할 때도 사용된다

 

api key 마스킹

위의 사진은 위도와 경도를 입력해 그 지역의 날씨를 알수 있는 api인데 요청을 보낸후 내트워크 탭에서 확인한 사진이다

하지만 request URL을 보면 api key인 appid의 값이 보여지게 된다

 

이런 경우 rewrite를 사용하여 api를 마스킹 처리 할 수 있다

 

그래도 header에 api key를 넣어서 보내는 경우에는 보여지게 된다

CORS error 해결

cors 에러는 브라우저에서 서버로 요청을 보낼때 SOP(동일 출처 허용)정책으로 인해 cors 에러가 생긴다 하지만 서버끼리 서로 요청하는 것은 브라우저에서 서버로 요청을 보내는게 아니므로 SOP정책이 적용이 되지 않음으로 데이터가 잘 받아진다 next rewrite도 이러한 점을 이용한다

 

next rewrite를 이용하면 next 서버에서 구동되기 때문에 요청을 보내기 때문에 cors 에러가 생기지 않고 원활하게 요청을 보낼수 있다

 

마무리

오늘은 next.config.js에서 세팅 할 수 있는 옵션인 redirect와 rewrite에 대해 알아보았다

next의 redirect를 이용하여 사용자가 없는 경로로 이동하는것을 막을 수 있을것 같고

rewrite를 사용하여 api key를 마스킹하여 보안성을 챙기고 cors 에러도 쉽게 해결 할 수 있어 좋은 기능들이라고 생각한다