[Next] Next.js 리다이렉트(Redirect)

next.config.js는 Next.js 프로젝트의 설정 파일로, 다양한 옵션을 통해 애플리케이션의 동작을 조정할 수 있습니다. redirects 옵션을 사용하면 특정 URL 요청을 다른 URL로 리다이렉트 하도록 설정할 수 있습니다.

 

목차

 

1. Redirect란?

2. Redirect 설정 방법

3. Redirect 예시

4. Redirect 주의사항

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

1. Redirect란?

redirects는 사용자가 특정 URL에 접근했을 때, 다른 URL로 요청을 자동으로 전환하는 기능입니다. 예를 들어, 페이지 경로가  /list에서 /products라고 바뀐 경우 list로 들어오는 요청을 /products로 보낼 때 사용합니다.

Next.js의 리다이렉트는 서버 측에서 처리되며, 307(임시 리디렉션) 또는 308(영구 리디렉션) 상태 코드를 반환할 수 있습니다.

 

2. Redirect 설정 방법

next.config.js 파일에서 redirects 메서드를 정의하여 리다이렉트를 설정할 수 있습니다. 이 메서드는 비동기 함수로, 배열 형태의 리다이렉트 객체를 반환해야 합니다.

 

기본 사용법

module.exports = {
  async redirects() {
    return [
      {
        source: '/about', // 리다이렉트 원본 URL(요청 URL)
        destination: '/', // 리다이렉트 대상 URL
        permanent: true, // Temporary | Permanent 리다이렉트 옵션
      },
    ]
  },
}

 

permanent 옵션은 true/false에 따라 http status code를 307이나 308로 내려줍니다.

옵션이 true인 경우 클라이언트/검색 엔진이 리디렉션을 영원히 캐시하도록 지시하는 308 상태 코드를 내려줍니다.
옵션이 false인 경우 임시로 캐시되지 않는 307 상태 코드를 내려줍니다.

next.config.js Options: redirects | Next.js

 

3. Redirect 예시

 

1. Basic redirect

module.exports = {
  async redirects() {
    return [
      // Basic redirect
      {
        source: '/list',
        destination: '/products',
        permanent: false, // 
      },
    ]
  },
}

 

• 사용자가 /list를 방문하면 /products로 이동됩니다.
• permanent
  • false : SEO에 영향을 주지 않는 307 리다이렉트를 사용합니다. (검색 엔진에게 "이 URL은 임시로 이동했으며, 원본 URL이 여전히 유효하다"고 알림 )
  • true : SEO에 영향을 주는 308 리다이렉트를 사용합니다. (검색 엔진에게 "이 URL은 이제 새로운 URL로 완전히 이동했다"고 알림)

2. Wildcard path matching

module.exports = {
  async redirects() {
    return [
      {
        source: '/link/:path*',
        destination: '/products/:path*',
        permanent: true,
      },
    ];
  },
};

 

 

• /link/item은 /product/item로, /link/event는 /products/event로 리다이렉트됩니다.
• 와일드카드(:path*)를 사용하면 경로를 동적으로 매핑할 수 있습니다.

 

4. Redirect 주의사항

 

SEO 고려

308(영구 리다이렉트)은 검색 엔진에 리다이렉트 된 URL을 인덱싱 하도록 지시합니다. 이 설정은 되돌릴 수 없으므로 주의해야 합니다.

 

클라이언트 측 리다이렉트와 차이점

next.config.js의 리다이렉트는 서버 측에서 처리되며, 클라이언트 측의 useRouter를 사용하는 리다이렉트와는 동작 방식이 다릅니다.

특징	next.config.js 리다이렉트	useRouter 리다이렉트
처리 위치	서버에서 처리	브라우저(클라이언트)에서 처리
SEO 영향	⭕ (307 / 308 상태 코드 반영)	❌ (없거나 부정적 영향 가능)
리다이렉트 속도	빠름 (서버 요청 전 처리)	느림 (페이지 로드 후 js 실행 필요)
사용 사례	URL 구조 변경, SEO 작업	로그인/조건부 이동, 동적 리다이렉트
SEO 친화적	⭕	❌
추가 자바스크립트 필요 여부	❌	⭕ (useRouter 사용)

 

 

• SEO가 중요한 작업이라면 next.config.js 리다이렉트를 사용하세요.
• 사용자 액션에 따른 동적 이동이 필요하다면 클라이언트 측 리다이렉트를 사용하세요.

 

 

 

[Next] Next.js 라우팅(Routing)

 

[Next] Next.js 시작하기