Next.js App Router で react-i18next の書き方

react-i18next の書き方メモ

クライアントコンポーネント

"use client";

import { useTranslation } from "react-i18next";

interface Hoge {
  title: string;
  text: string;
}

export default function Page() {
  const { t } = useTranslation();
  const hoge = t("hoge", {
    returnObjects: true,
  }) as Hoge;

  return (
    <>
      <h1>{hoge.title}</h1>
      <p>{hoge.text}</p>
    </>
  );
}    

サーバーコンポーネント

import initTranslations from "@/app/i18n";

interface Props {
  locale: string;
}

interface Hoge {
  title: string;
  text: string;
}

const i18nNamespaces = ["hoge"];

export default async function Page({ locale }: Props) {
  const { t } = await initTranslations(locale, i18nNamespaces);
  const hoge = t("hoge", {
    returnObjects: true,
  }) as Hoge;

  return (
    <>
      <h1>{hoge.title}</h1>
      <p>{hoge.text}</p>
    </>
  );
}