문서 언어 설정

접근성 및 SEO를 위한 페이지 언어 선언

문제

웹페이지는 프랑스어로 표시되지만, HTML 문서 자체에는 언어가 표시되지 않습니다(예: <html lang="en">). 언어를 선언하지 않으면 스크린 리더가 영어 발음 규칙을 사용하여 프랑스어 콘텐츠를 읽으려고 시도합니다. 또한 브라우저의 자동 번역 기능을 제공하지 못하고 검색 엔진 인덱싱에도 영향을 미칩니다.

해결 방법

루트 레이아웃 컴포넌트에서 URL의 lang 파라미터를 읽습니다. 이 lang 파라미터를 <html> 요소의 lang 속성에 전달합니다. 이렇게 하면 브라우저와 보조 기술에 전체 문서의 언어를 명시적으로 선언할 수 있습니다.

단계

1. 루트 레이아웃에서 lang 파라미터에 액세스

Next.js App Router에서 동적 세그먼트(예: [lang]) 내부의 layout.tsx 파일은 해당 세그먼트의 값을 params prop으로 자동으로 받습니다.

2. <html> 요소에 lang 속성 설정

app/[lang]/layout.tsx 파일을 수정하여 params prop을 받고 해당 lang 속성을 <html> 태그의 lang 속성에 적용합니다.

// app/[lang]/layout.tsx

export default function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { lang: string };
}) {
  return (
    <html lang={params.lang}>
      <body>{children}</body>
    </html>
  );
}

이렇게 하면 /fr/about에 대한 요청이 <html lang="fr">로 시작하는 렌더링된 페이지를 생성합니다. 이 간단한 변경으로 스크린 리더, 검색 엔진 및 브라우저에 콘텐츠가 어떤 언어로 작성되었는지 올바르게 알릴 수 있습니다.