next-i18next でおすすめの設定

はじめに

こんにちは kimizuy です。

今回は next-i18next を使う上でおすすめの設定を 3 点、ご紹介します。

そもそも next-i18next とは

i18next や react-i18next をベースに Next.js で使えるようにした i18n フレームワークです。プリレンダリング（SSG, SSR）にも対応しています。

react-i18next と同様に useTranslation や <Trans> があり、使い勝手も同じです。

tldr

実際に next-i18next の設定ファイルを以下に示します。

const path = require('path')

/**
 * @type {import('next-i18next').UserConfig}
 */
module.exports = {
  i18n: {
    defaultLocale: 'ja',
    locales: ['ja', 'en'],
  },
  defaultNS: 'translations',
  localePath: path.resolve('./locales'),
  localeStructure: '{{lng}}/{{ns}}',
  keySeparator: '.',
  reloadOnPrerender: true,
}

おすすめ設定 1: 設定ファイルに型を効かせる

設定ファイルは commonjs で書く必要がありますが、以下の行を追加することで TypeScript の恩恵を受けることができ、プロパティの型が効くようになります。

/**
 * @type {import('next-i18next').UserConfig}
 */

おすすめ設定 2: 構造化したデータを呼び出せるようにする

これは厳密には i18next の設定ですが、JSON で構造化したデータを呼び出すときに便利です。

next-i18next の Example はシンプルすぎてこの設定は含まれていないので、初めは使えるオプションなのか不安になりました。

keySeparator: '.',

実際の使用例は以下のようになります。

// translation.json
{
    section:{
        title: "Awesome Title",
        subTitle: "Awesome Sub Title"
    }
}

const Home = () => {
	const { t } = useTranslation()
	return <div>{t("section.title")}</div> // Awesome Title
}

おすすめ設定 3: dev モードのときリロードで JSON の更新を反映する

このオプションを true にすると next dev モードのときにリロードするだけで JSON の更新が画面に反映されます。これがない場合は更新を反映するために next dev し直す必要がありました。

便利なんですが、デフォルトでは false になっています。

reloadOnPrerender: true

参考

• https://github.com/isaachinman/next-i18next#options
• https://github.com/isaachinman/next-i18next/pull/1359

おわりに

今回は next-i18next を使う上でおすすめの設定についてご紹介しました。特に reloadOnPrerender: true は DX 向上に必須なレベルです。

以上、お読みいただきありがとうございました。