[NextJS] Rewrites()로 라우팅 주소 바꾸기

API key를 사용하다보면,

API를 활용하기 위해 fetch를 요청하면 그 결과값으로 Request URL을 받아오는데,

이 request URL 에 우리가 사용한 api  KEY가 전부 드러나 있는 경우가 있다.

 

 

이게 왜 문제가 되냐면,❓

api key가 공개되어있을 때,

 

해당 Key를 통해 접근하지 말아야하는 정보에 누구나 쉽게 접근하여

정보 유출 등의 문제가 일어날 수 있기 때문이다.

 

이러한 문제를 방지하기 위해

nextJS에서는  Rewrites() 라는 훅을 이용하여 api  key를 url에 드러나지 않도록 만들기도 한다! 

 

---

🍎Rewrites()

 브라우저 주소창에 어떠한 segment를 입력하면, 내가 설정한 다른 주소로 라우팅되도록 만들 수 있음

 

이러한 라우팅 변경 과정은 서버에서 발생하기 떄문에

브라우저에 페이지가 랜더링 되기 전에 URL은 변경되어 라우팅된다.

 

 

코드 예시

source : 사용자가 브라우저 주소창에 입력할 세그먼트

destination : 실제 라우팅되는 URL 주소

// next.config.js

module.exports = {
  async rewrites() {
    return [
      {
        source: '/old-url',
        destination: '/new-url',
      },
      {
        source: '/blog/:slug', // Using dynamic segments
        destination: '/posts/:slug',
      },
      {
        source: '/alias',
        destination: '/page-to-alias',
      },
    ];
  },
};

 

 

1.  /new-url.에 대한 요청은 /old-url로 재작성됨
2. /blog/:slug(동적 세그먼트인 경우 ) 에 대한 요청은  /posts/:slug.로 재작성됨
3.  /alias에 대한 요청은  /page-to-alias.재작성됩니다