[Next.js] URL path variable 정책이 바뀌었을 때 SEO 설정을 어떻게 해야 할까

 

크루위키 프로젝트 진행 중 큰 변경사항이 발생했습니다. 바로 url의 path variable 형식이 달라지는 것..!

 

크루위키는 위키 형태의 서비스로, 작성된 글의 제목이 그대로 url path variable로 설정되어 사용되고 있었습니다. 하지만 제목 대신 UUID를 사용하는 정책으로 바뀌면서 모든 글의 url이 변경되었습니다.

 

예를 들어 메인 페이지의 경우 /wiki/대문이 /wiki/30a6c25d 형태로, 게시글의 경우 /wiki/OO크루(0기)가 /wiki/40b6c26e 형태가 되었습니다.

 

하지만 메인 페이지도 path variable이 UUID로 바꾸면서 기존 사용자들의 사용성에 대해 우려사항이 있었습니다. 즐겨찾기로 접속하는 사용자들은 기존의 /wiki/대문 페이지를 그대로 이용할 것이고, 이 URL로 들어온 사용자들은 아래 사진과 같이 404 에러 페이지를 보게 되기 때문이죠.

 

 

 

 

그래서 Next.js에서 /wiki/대문 으로 접근하는 사용자들을 /wiki/[대문 UUID]로 리다이렉션 시키기 위한 조치를 취하기로 했습니다.

 

 

 

 

Next.js에서의 리다이렉션 동작 원리

 

Next.js에서는 조금 다른 점이 있는데 전통적으로 리다이렉션 시 301 (temporary redirect), 302 (permanent redirect) 상태 코드를 사용하지만 Next.js는 307과 308 상태 코드를 사용합니다. 이는 브라우저에서 302 리다이렉트 시 원본 요청 메서드에 상관없이 리다이렉션 요청을 POST에서 GET 메서드로 바꾸기 때문입니다. 결국 원래 의도와는 다른 동작을 불러일으켜 예기치 못한 버그를 낳을 수 있습니다. 따라서 Next.js에서는 302 대신 307 상태 코드를 사용하여 임시 리다이렉트이면서도 요청 메서드가 원본 그대로 유지될 수 있도록 합니다. 마찬가지로 301 대신 308 상태 코드를 사용하여 영구 리다이렉트 시에도 원본 HTTP 메서드를 보존합니다.

 

https://nextjs.org/docs/app/api-reference/functions/redirect#why-does-redirect-use-307-and-308

Functions: redirect | Next.js

 

 

 

 

Next.js Config를 통한 리다이렉트 설정

 

Next.js는 Config 설정에서 리다이렉션 설정을 직접 해줄 수 있습니다.

 

// next.config.ts

import type {NextConfig} from 'next';

const nextConfig: NextConfig = {
  // ...
  
  redirects: async () => [
    {
      source: '/',
      destination: `${URLS.wiki}/${URLS.daemoon}`, // /wiki/[대문 UUID]
      permanent: false,
    },
  ],
};

export default nextConfig;

 

 

기존에는 위와 같이 / 경로를 /wiki/[대문 UUID]로 리다이렉트 하도록 설정되어 있었고, /wiki/대문을 리다이렉트 하는 설정이 필요했습니다.

 

이때 permanent 설정을 넣어줄 수 있는데요. permanent는 Next.js가 검색엔진에게 제공하는 신호라고 볼 수 있습니다.

• permanent: false → 307 상태 코드 (임시 리다이렉트)
• permanent: true → 308 상태 코드 (영구 리다이렉트)

307 임시 리다이렉션 시 검색엔진은 기존 source URL와 리다이렉션 될 destination URL을 모두 유지하며, 308 영구 리다이렉션 시 검색엔진은 기존의 source URL을 더 이상 사용하지 않는다고 인식하게 됩니다. 또한 308 영구 리다이렉션의 경우 검색엔진의 인덱싱에서 기존 source URL을 점진적으로 제거하고 시간이 지나면서 destination URL로 SEO가 이전됩니다.

 

 

permanent를 true로 설정한 이유

  import type {NextConfig} from 'next';
  
  const nextConfig: NextConfig = {
    // ...
    
    redirects: async () => [
      {
        source: '/',
        destination: `${URLS.wiki}/${URLS.daemoon}`,
        permanent: false,
      },
      {
        source: `${URLS.wiki}/%EB%8C%80%EB%AC%B8`, // 인코딩된 /대문
        destination: `${URLS.wiki}/${URLS.daemoon}`,
        permanent: true,
      },
    ],
  };

  export default nextConfig;

 

 

새롭게 추가할 리다이렉트 설정에서는 permanent를 true로 설정해 주었습니다.

URL path variable에 UUID를 사용하는 것으로 정책이 바뀜에 따라 /wiki/대문 페이지는 더 이상 사용하지 않는다고 논의되었기 때문입니다.

 

현재는 게시글 중 하나인 "크루위키 대문" 검색 시 /wiki/대문/... 형태로 인덱싱 되고 있지만 permanent 설정을 통해 /wiki/[UUID] 주소의 SEO가 최적화될 것으로 기대합니다.