Next.js + i18next 환경에서

언어 prefix 없는 메인 도메인을 SEO 관점에서 처리하는 방법

글로벌 서비스를 운영하다 보면 다국어 지원은 피할 수 없는 과제가 된다.

Next.js는 기본적으로 i18n 기능을 제공하며, i18next와 함께 사용하면 번역 관리가 훨씬 수월해진다.
하지만 i18n을 적용하다 보면 이런 고민이 생긴다.

왜 기본 언어에도 언어 코드가 붙지?
기본 언어는 prefix 없이 제공하는 게 맞지 않나?
이게 SEO에 문제를 일으키지 않을까?

이 글에서는 Middleware를 활용해 기본 언어의 경우 메인 도메인에서는 언어 prefix를 제거하는 방법을 제공한다.

내용에 앞서 SEO에서 도메인이 중요한 이유

검색 엔진은 동일한 콘텐츠를 여러 URL에서 제공하면 이를 중복 콘텐츠(duplicate content)로 인식할 수 있다.

예를 들어

domain.com/about
domain.com/ko/about
domain.com/ja/about

3개의 URL이 동일한 언어, 동일한 콘텐츠를 제공한다면 검색 엔진은 이를 중복으로 판단할 수 있다.

또한 이로 인해 다음과 같은 문제가 발생할 수 있다.

SEO 랭킹 분산 (링크 가치가 나뉨)
색인(Indexing) 문제 (어떤 페이지를 우선해야 할지 혼란)
크롤링 비효율

이런 문제를 방지하려면

적절한 canonical 태그 사용
다국어 페이지를 위한 hreflang 설정
내부 링크 (internal linking)

가능한 경우, 언어별로 하나의 URL만 접근 가능하도록 구성

즉, 다국어 환경에서는 도메인 구조 관리가 매우 중요하다.

i18next 미들웨어 동작 이해하기

※ 코드는 i18next 기반으로 작성

i18next를 사용할 때 미들웨어는 요청이 들어올 때마다 사용자의 언어를 판단하고 URL을 정리하는 역할을 한다.

요청에서 언어 정보 확인

먼저, 현재 요청 URL에 언어 코드가 포함되어 있는지 확인한다.

예를 들어

/en/about   → 언어 있음
/about      → 언어 없음

이 과정을 통해 “현재 어떤 언어로 접근했는지”를 판단한다.

언어가 없다면 자동으로 prefix 추가

만약 URL에 언어 코드가 없다면, 브라우저 설정이나 기본 언어(fallback language)를 기준으로 적절한 언어를 결정한 뒤 해당 언어 prefix를 붙여 리다이렉트한다.

if (!lngInPath && !req.nextUrl.pathname.startsWith('/_next')) {
  return NextResponse.redirect(
    new URL(`/${lng}${req.nextUrl.pathname}${req.nextUrl.search}`, req.url)
  )
}

예를 들어

/about  →  /ko/about   (기본 언어가 ko인 경우)

즉, 모든 요청을 언어가 포함된 URL 구조로 통일하는 단계이다.

이후에 언어가 URL에 포함되어 있다면 별도의 처리 없이 다음 단계로 넘어간다.

prefix를 그대로 사용할 경우 발생할 수 있는 문제

기본 언어인데도 항상 prefix가 붙는다.
동일한 콘텐츠가 여러 URL로 접근 가능해지는 상황이 발생할 수 있다.

동일 콘텐츠로 인한 중복 콘텐츠(duplicate content) 문제
여러 URL로 분산되는 SEO 랭킹
불필요한 URL까지 탐색하는 크롤링 비효율

그렇기에 기본 언어에 대한 prefix 제거 후 동작하는 것이 좋다.

Middleware Prefix 제거

앞서 살펴본 문제를 해결하기 위해 미들웨어에서 기본 언어(fallback language)에 대한 URL을 별도로 처리한다.

Redirect

먼저, 사용자에게 보여지는 URL을 정리하기 위해 language prefix가 제거된 URL로 리다이렉트한다.

NextResponse.redirect(new URL(target, req.url));

이 과정으로 인해 /ko/about → /about 검색 엔진과 사용자 모두 prefix 없는 URL을 보게 된다.

Rewrite

prefix 없는 요청이 들어왔을 때 애플리케이션은 여전히 prefix 기반 경로로 동작하기 때문에 rewrite를 통해 내부적으로 prefix가 포함된 경로로 매핑한다.

NextResponse.rewrite(
  new URL(`/${fallbackLng}${pathname}${search}`, req.url)
);

전체 코드

1. Language Check

2. Language Check & Fallback Language Check

3. Handling access to the fallback language (replace fallback language in URL)
Replace the fallback language segment in the target URL:
target = target.replace(`/${fallbackLng}`, target === `/${fallbackLng}` ? "/" : "");

-> Redirect not includes fallback language
NextResponse.redirect(new URL(target, req.url));

-> Rewrite the fallback language page
NextResponse.rewrite(new URL(`/${fallbackLng}${pathname}${search}`, req.url));

4. Continue
NextResponse.next({ ... })

위 처럼 진행하면 사용자에게는 깔끔한 URL을 제공하면서 SEO에는 효율적인 도메인을 가져갈 수 있다.

전체 코드 : https://github.com/dango0812/tanstack-virtual-grid/blob/main/middleware.ts

Next.js i18next 환경에서 SEO 관점에서 언어 prefix 제거하기