사용자의 언어 선택 유지하기

문제

사용자가 사이트에서 수동으로 '프랑스어'를 선택합니다. 브라우저를 닫은 후 나중에 사이트의 메인 주소(예: example.com)를 입력하면 애플리케이션이 기본값(예: 영어) 또는 자동 감지된 언어로 되돌아갑니다. 선택 사항을 기억하지 못하면 사용자는 새 세션을 시작할 때마다 언어 전환기를 찾아 언어를 다시 선택해야 합니다.

해결 방법

사용자가 언어를 선택하면 해당 선택 사항을 쿠키에 저장합니다. 미들웨어에서 사용자가 루트 경로(/)를 방문할 때 Accept-Language 헤더를 확인하기 전에 이 쿠키를 확인합니다. 유효한 쿠키가 발견되면 브라우저 기본값을 무시하고 사용자를 선택한 언어의 루트(예: /fr)로 리디렉션합니다.

단계

1. 언어 구성 정의

지원되는 언어, 기본 언어, 사용자 기본 설정을 저장하는 데 사용할 쿠키 이름을 저장할 중앙 구성 파일을 생성합니다.

// i18n.config.ts

export const locales = ['en', 'es', 'fr'];
export const defaultLocale = 'en';
export const localeCookieName = 'NEXT_LOCALE';

2. 언어 파서 설치

쿠키가 설정되지 않은 경우 폴백으로 사용될 Accept-Language 헤더용 파서가 여전히 필요합니다.

npm install accept-language-parser

3. 미들웨어 생성

프로젝트 루트에 middleware.ts 파일을 생성합니다. 이 미들웨어는 먼저 NEXT_LOCALE 쿠키를 확인합니다. 쿠키가 발견되지 않으면 Accept-Language 헤더 확인으로 폴백합니다. 이 로직은 루트 경로(/)에 대한 요청에만 적용됩니다.

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import parser from 'accept-language-parser';
import {
  locales,
  defaultLocale,
  localeCookieName,
} from './i18n.config';

function getPreferredLocale(request: NextRequest) {
  // 1. Check for the cookie
  const cookie = request.cookies.get(localeCookieName);
  if (cookie) {
    const locale = cookie.value;
    if (locales.includes(locale)) {
      return locale;
    }
  }

  // 2. Check the Accept-Language header
  const acceptLang = request.headers.get('Accept-Language');
  if (acceptLang) {
    const bestMatch = parser.pick(locales, acceptLang, {
      loose: true,
    });
    if (bestMatch) {
      return bestMatch;
    }
  }

  // 3. Return the default
  return defaultLocale;
}

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;

  // 1. Check if the request is for the root path
  if (pathname === '/') {
    // Get the user's preferred language (from cookie or header)
    const bestLocale = getPreferredLocale(request);

    // Redirect to the best-matched language path
    request.nextUrl.pathname = `/${bestLocale}`;
    return NextResponse.redirect(request.nextUrl);
  }

  // 2. For all other paths, continue as normal
  return NextResponse.next();
}

export const config = {
  matcher: [
    // We only want to run this on the root path for now
    '/',
    // We also need to match non-root paths to let them pass
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
};

이제 이 미들웨어의 로직은 사용자가 사이트 루트를 방문할 때 암묵적 기본 설정(브라우저 헤더)보다 사용자의 명시적 선택(쿠키)을 올바르게 우선시합니다.