next.config.js에서 redirects와 rewrites의 차이

redirects

• 사용자가 특정 URL에 접근했을 때, 다른 URL로 자동으로 리다이렉트하는 기능

module.exports = {
  async redirects() {
    return [
      {
        source: '/about',
        destination: '/',
        permanent: true
      }
    ]
  }
}

• source: 적용 대상 경로
• destination: 이동할 경로
• permanent: true 인 경우 308 상태 코드와 함께 클라이언트/검색 엔진에 리디렉션을 영원히 캐시하도록 지시. false 인 경우 일시적이고 캐시되지 않음.

기존에는 301, 302 코드를 사용했으나 많은 브라우저에서 원래 방식과 상관없이 리다이렉트의 요청방식을 GET으로 변경했다. 예를 들어 브라우저가 위치가 /v2/users인 상태 코드 302를 반환하는 POST /v1/users를 요청한 경우 후속 요청은 예상되는 POST /v2/users 대신 GET /v2/users가 될 수 있다. 사용된 요청 메서드를 명시적으로 보존하기 위해 307 임시 리디렉션 및 308 영구 리디렉션 상태 코드를 사용한다.

사용 케이스

기존의 구식 경로로 들어오는 사용자에게 새롭게 대체된 경로로 안내할 때 주로 쓰인다.

rewrites

리다이렉팅과는 다르게 말 그대로 경로를 다시 쓴다. 맵핑하는 개념. source로 접근했는데 destination으로 간 것처럼 덮어씌운다.

module.exports = {
  async rewrites() {
    return [
      {
        source: '/posts',
        destination: 'https://api.example.com/v1/posts?API_KEY=' + API_KEY
      }
    ]
  }
}

사용 케이스

• API 요청 시 API KEY 등의 보안 키를 포함하게 될 때 rewrites를 사용하면 해당 URL이 노출되지 않는다.