MENU

【Nextjs】i18nextをgetServerSidePropsで利用する

エンジニア
Nextjs TypeScript

react-i18nextをgetServerSideProps(SSR)で利用するための方法を記載します。

react-i18nextの導入方法はこちらを参考にしてください。

Tsukurue
【Nextjs】i18nextを利用して多言語化する | Tsukurue Next.jsで日本語ページ、英語ページ、その他言語ページといったように同一ページで他言語を行います。 Next.jsでは、国際化(i18next)のサポートがデフォルトで行われていま…
目次

getServerSidePropsのmiddlewareを追加

getServerSidePropsで利用するためのmiddlewareを追加します。

middlewareの中ではreloadResourcesをしていますが、これは、SSRのタイミングで翻訳ロードが保証されてないため、middlewareでreloadしています。

あとは、Contextに翻訳するt関数を追加して返しています。

import i18n from "@/i18n";
import { TFunction } from "i18next";
import { NextPageContext } from "next";

interface CustomAppContext {
  t: TFunction;
}

export function getServerSidePropsMiddleware<T extends any>(
  f: (context: NextPageContext, { t }: CustomAppContext) => Promise<T>
) {
  return async (context: NextPageContext) => {
    const locale = typeof context.locale === "string" ? context.locale : "ja";
    await i18n.reloadResources();
    const t = i18n.getFixedT(locale, null, null);

    const pageProps = await f(context, { t });

    return pageProps;
  };
}

getServerSidePropsで言語ごとの翻訳テキストを取得する

getServerSidePropsMiddlewareを介することでt関数を受け取り、翻訳を行います。

import { getServerSidePropsMiddleware } from "@/getServerSidePropsMiddleware";


export const getServerSideProps = getServerSidePropsMiddleware(
  async (context, { t }) => {

    const metaTitle = t("header.mypage");

    ...略
  }
);

Summary

i18nextをgetServerSidePropsで使うことがなかったので、色々と調べてサポートも受けながらこのような形になりました。
悩んだり、迷ったりして調べることが自分の経験になると実感。

エンジニア
Nextjs TypeScript
よかったらシェアしてね！

関連記事

目次