도메인 변경에 따른 리다이렉트 설정 가이드

Next.js 프로젝트에서 특정 URL 경로가 다른 도메인으로 변경되었을 때 사용자를 자동으로 새 도메인으로 리다이렉트시키는 방법에 대한 설명글입니다. 제거된 경로를 리다이렉트 시키는 것은 사용자 경험 향상에 도움이 됩니다.

 

1. 서버 리다이렉트 설정

서버 측에서 리다이렉트를 설정하는 것이 가장 빠르고 효율적인 방법입니다. Next.js에서는 next.config.js 파일을 수정하여 이를 구현할 수 있습니다. 서버 측 리다이렉트는 사용자가 오래된 URL에 접근했을 때 바로 새 URL로 리다이렉트되므로 사용자 경험이 원활합니다.

next.config.js 파일 예제

module.exports = {
  async redirects() {
    return [
      {
        source: '/travel', // 오래된 경로
        destination: 'https://uritabi.ai', // 새 도메인
        permanent: true, // 301 리다이렉트 (영구적으로 변경됨을 의미)
      },
    ]
  },
}

 

2. 클라이언트 리다이렉트 설정

클라이언트 측 리다이렉트를 사용하여 사용자에게 "경로가 변경되었습니다"라는 알림을 제공하고 확인 버튼을 통해 사용자가 직접 리다이렉트할 수 있도록 할 수 있습니다. 이 방법은 서버 측 리다이렉트보다는 사용자 상호작용이 필요하므로 조금 더 느릴 수 있습니다.

pages/travel/index.js 파일 예제

import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function Travel() {
  const router = useRouter();

  useEffect(() => {
    const confirmRedirect = confirm('경로가 변경되었습니다. 새 페이지로 이동하시겠습니까?');
    if (confirmRedirect) {
      window.location.href = 'https://uritabi.ai';
    }
  }, []);

  return (
    <div>
      <p>경로가 변경되었습니다. 확인을 누르면 새 페이지로 이동합니다.</p>
    </div>
  );
}

 

서버 측 리다이렉트를 추천드립니다. 서버 설정을 통해 리다이렉트를 처리하면, 사용자는 페이지 로딩이 끝나기도 전에 즉시 새로운 주소로 넘어가게 되어 더 빠르고 효율적인 경험을 할 수 있습니다.

 

Next.js의 redirects() 함수를 사용하여 여러 경로에 대한 리다이렉트를 구성할 때, 경로가 50개 이상이라도 각각에 대해 리다이렉트를 설정할 수 있습니다. redirects() 함수 안에서 배열을 반환하는 구조를 통해, 각 경로마다 개별적인 리다이렉트 규칙을 명시할 수 있습니다.

예를 들어, 여러 경로를 다루는 경우에는 다음과 같이 각각의 경로와 목적지를 명시하는 방법으로 처리할 수 있습니다.

module.exports = {
  async redirects() {
    return [
      {
        source: '/travel',
        destination: 'https://uritabi.ai',
        permanent: true,
      },
      {
        source: '/food',
        destination: 'https://uritabi.ai/food',
        permanent: true,
      },
      // 추가적인 경로들...
    ];
  },
};

 

이렇게 배열 내에 각 경로에 대한 객체를 추가함으로써 원하는 만큼 많은 리다이렉트 규칙을 손쉽게 설정할 수 있습니다. 배열을 동적으로 생성하는 방법을 사용하면 코드를 더 간결하게 만들 수 있습니다. 예를 들어, 경로와 목적지를 포함하는 데이터 구조에서 리다이렉트 규칙을 생성할 수 있습니다.

const redirectsList = [
  { path: '/travel', destination: 'https://uritabi.ai' },
  { path: '/food', destination: 'https://uritabi.ai/food' },
  // 추가적인 경로들...
];

module.exports = {
  async redirects() {
    return redirectsList.map(redirect => ({
      source: redirect.path,
      destination: redirect.destination,
      permanent: true,
    }));
  },
};

 

경로가 많아질 때 코드를 간결하게 유지하는 데 도움을 줍니다. 모든 리다이렉트 규칙을 하나의 장소에서 관리할 수 있으며, 필요에 따라 쉽게 추가하거나 수정할 수 있습니다.