문서 언어 설정하기

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

문제

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

해결책

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

단계

1. 루트 레이아웃에서 lang 매개변수에 접근하기

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

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

app/[lang]/layout.tsx 파일을 수정하여 params 프롭을 받고 그 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">로 시작하는 페이지를 렌더링하게 됩니다. 이 간단한 변경으로 스크린 리더, 검색 엔진 및 브라우저에 콘텐츠가 어떤 언어로 작성되었는지 올바르게 알릴 수 있습니다.