지원되지 않는 언어 코드 처리

문제

애플리케이션은 URL 경로(예: /en/, /fr/)를 사용하여 언어를 결정하지만, 사용자는 /xx/about와 같은 임의의 값을 수동으로 입력할 수 있습니다. 이 값이 지원되는 언어와 일치하지 않으면 애플리케이션이 충돌하거나, 일반적인 오류를 표시하거나, 번역되지 않은 콘텐츠를 표시하여 사용자를 유효한 환경으로 안내하지 못할 수 있습니다.

해결 방법

미들웨어를 사용하여 들어오는 모든 요청을 가로챕니다. 이 미들웨어는 URL의 언어 코드를 지원되는 언어의 확정 목록과 비교하여 검증합니다. 코드가 지원되지 않으면 애플리케이션 로직에 도달하기 전에 요청이 "찾을 수 없음" 페이지로 재작성됩니다.

단계

1. 지원되는 언어 정의

유효한 언어 코드(로케일) 목록을 저장할 중앙 구성 파일을 생성합니다. 이렇게 하면 미들웨어 및 앱의 다른 부분에서 목록을 재사용할 수 있습니다.

// i18n.config.ts
export const locales = ['en', 'es', 'fr'];

2. 미들웨어 파일 생성

프로젝트 루트(또는 src/ 디렉터리)에 middleware.ts라는 새 파일을 생성합니다. Next.js는 이 파일을 자동으로 감지하고 요청 시 실행합니다.

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { locales } from './i18n.config';

export function middleware(request: NextRequest) {
  // Logic will go here in the next step
}

3. 검증 로직 추가

middleware 함수 내에서 요청으로부터 pathname를 가져옵니다. 경로의 첫 번째 세그먼트(예: /en/about의 en)를 확인하고 이것이 유효하고 지원되는 언어인지 검사해야 합니다.

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { locales } from './i18n.config';

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

  // 1. Handle the root path separately
  // (This will be handled by the next recipe: "Detecting a user's
  // preferred language"). For now, we just let it pass.
  if (pathname === '/') {
    return NextResponse.next();
  }

  // 2. Extract the language code from the path
  const langCode = pathname.split('/')[1];

  // 3. Check if the language code is in our list
  if (locales.includes(langCode)) {
    // Language is valid, continue to the requested page
    return NextResponse.next();
  }

  // 4. If the language is not valid, rewrite to a 404 page
  // This keeps the invalid URL in the browser bar
  const url = request.nextUrl.clone();
  url.pathname = `/404`; // Assumes you have an app/404.tsx file
  return NextResponse.rewrite(url);
}

이 로직은 모든 요청을 검사합니다. URL이 /fr/about인 경우, langCode는 fr이고, locales에서 발견되어 요청이 계속됩니다. URL이 /xx/about인 경우, langCode는 xx이고, 발견되지 않아 애플리케이션이 유효하지 않은 요청을 처리하려고 시도하지 않고 사용자에게 404 페이지가 표시됩니다.

4. 미들웨어 매처 구성

미들웨어를 더 효율적으로 만들려면 실행할 경로를 지정해야 합니다. 페이지 요청에서는 실행하되 정적 파일과 API 라우트는 건너뛰도록 설정합니다.

middleware.ts 파일 하단에 config 객체를 추가합니다.

// middleware.ts

// ... (the middleware function from above)

export const config = {
  matcher: [
    // Skip all paths that start with:
    // - api (API routes)
    // - _next/static (static files)
    // - _next/image (image optimization files)
    // - favicon.ico (favicon file)
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
};

이 정규 표현식은 일반적으로 정적 자산이나 API 호출에 사용되는 경로를 제외한 모든 경로에서 미들웨어를 실행하도록 지시합니다. 이를 통해 모든 이미지, 폰트 또는 데이터 요청에 대한 불필요한 검증을 방지할 수 있습니다.