Next.js: 완벽한 리다이렉트 설정 가이드 - 경로 변경을 손쉽게!

※ 아래 경로는 예시입니다. (해당 경로로 접속해도 리다이렉트 작동하지 않습니다.)

 

Next.js 프로젝트를 운영하다 보면 기존 경로를 새로운 경로로 변경해야 하는 상황이 생길 수 있습니다. 이때 사용자가 기존 경로로 접근했을 때 자동으로 새로운 경로로 이동하게 하는 방법이 있습니다. 바로 next.config.js 파일에서 async redirects() 메서드를 활용하는 것입니다.

 

1. Next.js 리다이렉트란?

Next.js의 리다이렉트는 사용자가 특정 경로에 접근했을 때 자동으로 다른 경로로 이동시키는 기능입니다. 이는 SEO를 고려한 영구 리다이렉트(301)와 임시 리다이렉트(307)로 나뉩니다. 이를 통해 검색 엔진 크롤러와 사용자가 올바른 페이지로 안내될 수 있도록 합니다.

 

2. 기본적인 리다이렉트 설정

다음은 기본적인 리다이렉트 설정 예제입니다. next.config.js 파일에 다음 코드를 추가합니다.

 

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/uritabi', // 이전 경로
        destination: 'https://uritabi.kakao.gg', // 새로운 경로
        permanent: true, // 영구 리다이렉트 (301 상태 코드)
      },
    ]
  },
}

 

설정을 통해 https://kakao.gg/uritabi 요청을 https://uritabi.kakao.gg 로 영구적 리다이렉트합니다.

 

3. 다양한 리다이렉트 설정

프로젝트에 따라 다양한 리다이렉트가 필요할 수 있습니다. 배열이기 때문에, 이어서 작성하면 됩니다.

 

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/uritabi', // 이전 경로
        destination: 'https://uritabi.kakao.gg', // 새로운 경로
        permanent: true, // 영구 리다이렉트 (301 상태 코드)
      },
      {
        source: '/uritabi/network', // 이전 경로
        destination: 'https://uritabi.kakao.gg/network', // 새로운 경로
        permanent: false, // 임시 리다이렉트 (307 상태 코드)
      },
    ]
  },
}

 

4. 리다이렉트 설정 시 주의사항

• 영구 리다이렉트: 검색 엔진에 새로운 경로를 알리기 위해 상태 코드 301을 사용합니다. 이는 SEO에 긍정적인 영향을 줍니다.

• 임시 리다이렉트: 상태 코드 307을 사용하여 임시적으로 새로운 경로로 이동시키며, 검색 엔진에는 영향을 주지 않습니다.

• 정확한 경로 지정: 소스와 목적지 경로를 정확하게 지정하여 사용자가 올바른 페이지로 안내되도록 합니다.

 

사용자가 잘못된 경로로 접근했을 때 자동으로 올바른 페이지로 안내할 수 있으며, SEO에도 긍정적인 영향을 줄 수 있습니다. 다양한 상황에 맞춰 리다이렉트를 설정해 프로젝트를 운영할 수 있습니다.