うるおいらんど

Next.jsで一部のページのみのlangを変更したい

作成日
更新日

ほぼ日本語で、一部のプライバシーポリシーページでのみ英語にしたかったので、そこだけ動的に実装。

hooks/useSetHtmlLang.ts
"use client";

import { useEffect } from "react";

export function useSetHtmlLang(lang: string) {
  useEffect(() => {
    const originalLang = document.documentElement.lang;

    if (originalLang !== lang) {
      document.documentElement.lang = lang;
    }

    return () => {
      // アンマウント時に元に戻す場合
      document.documentElement.lang = originalLang;
    };
  }, [lang]);
}

使いたいページのコンポーネントを"use client"をつけて使う。

components/PrivacyPolicy.tsx
"use client";

import { useSetHtmlLang } from "@/hooks/useSetHtmlLang";

export function PrivacyPolicy({ lang, content }: { lang: string; content: React.ReactNode }) {
  useSetHtmlLang(lang);

  return (
    <main className="max-w-4xl mx-auto">
      <div className="markdown-content md-content markdown-body">
        <div className="px-2">
          {content}
        </div>
      </div>
    </main>
  );
}
サイトアイコン
公開日
更新日