Next.js - Redirects & Rewrites

✅ 사이드프로젝트를 하면서 발생했던 이슈에 대해서 정리합니다.

 

• Redirects 와 Rewrites

---

⚙️ next.config.js

• next.js에서 커스텀 설정을 하기 위해 프로젝트 디렉토리 루트에 next.config.js 파일을 만들어사용합니다.
• next.config.js는 JSON 파일이 아닌 일반 Node.js 모듈이며, Next.js 서버 및 빌드 단계에서 사용되며 브라우저 빌드에는 포함되지 않는다.
• Redirects 와 Rewrites 옵션은 next.config.js 에서 사용하는 옵션입니다.

---

📌 Redirects

module.exports = {

  async redirects() {
    return [
      {
        source: "/requestPage",
        destination: "/redirectPage",
        permanent: false,
      },
      /*
      위와 같은 객체형식으로 여러개 가능
      */
      
    ];
  },

};

예시 동작

 

• redirects()는 source, destination, permanent 속성이 있는 객체 배열을 반환하는 비동기 함수입니다.
• source 경로를 destination 경로로 redirect 하도록 설정할 수 있습니다.
   
  • source : 들어오는 요청 경로 (requset 경로)
  • destination : 이동할, 라우팅할 특정 페이지의 경로 (redirect 경로)
  • permanent : 브라우저나 검색엔진이 이 정보를 기억하는지 여부 (true - 308 status code  / false - 307 status code) 

 

◼ HTTP Status Code 307, 308

307 Temporary Redirect

• 임시 리다이렉트라고 해석할 수 있습니다.
• 만약 oldblog.kr 이라는 블로그가 있는데 어떠한 이슈로 인해 잠시동안 temp.oldblog.kr 블로그를 만든 후에 이전 블로그의 접속자들을 리다이렉트 시켜주고 싶을 때 사용합니다.  

308 Permanent Redirect

• 영구 리다이렉트라고 해석할 수 있습니다.
• 만약 oldblog.kr 이라는 예전 블로그에서, 새로운 newblog.kr 블로그를 만든 후 이전 블로그 접속자들을 리다이렉트 시켜주고 싶을 때 사용합니다.

307 과 308 코드의 차이 !

• 임시적 이동인지, 영구적 이동인지에 따른 차이!

---

📌 Rewrites

const API_KEY = process.env.API_KEY;

module.exports = {
  async rewrites() {
    return [
      {
        source: "/api/test",
        destination: `https://api.test?api_key=${API_KEY}`,
      },
     /*
      위와 같은 객체형식으로 여러개 가능
      */
    ];
  },
};

 

API_KET 가 12345a678910b 라고 가정했을 때 

* rewrites 설정을 하지 않은 경우 /api/test 로 GET 요청을 하면 https://api.test?api_key=12345a678910b 과 같이 API_KEY가 그대로 요청 URL에 노출됩니다.

* rewirtes 설정을 위와 같이 하면 /api/test로 GET 요청을 하면 destination 경로로 매핑되어 https://api.test?api_key=12345a678910b 로 GET 요청을하는 것은 동일하지만 사용자는 https://api.test 까지의 요청 URL만 확인할 수 있습니다.

 

🤔 정리 !

• Redirects 와 Rewrites 옵션은 next.config.js 에서 사용하는 옵션 !
• Redirects는 source 경로를 destination 경로로 redirect 시키고, URL을 변경 !
  
  
  • permanent 옵션이 true이면 308 status code, false이면 307 status code.
    주로 308은 영구이동, 307은 임시 이동일 때 사용!
• Rewrites는 URL 프록시 역할을 하고 destination 경로를 source 경로로 mask !
  
  
  • 프록시(Proxy)란 대신이란 의미로, 보안상의 문제로 직접 통신을 받을 수 없을 때 프록시를 이용해서 중계를 하는 개념!

 

 

🔗 참고한 글

[NextJS] Redirects & Rewrites

Nextjs Redirect 옵션에 Permanent는 뭐지?