next-i18next でおすすめの設定


はじめに

こんにちは kimizuy です。

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

そもそも next-i18next とは

i18nextreact-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 向上に必須なレベルです。

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

Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています

弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

タグ


投稿者 Gaji-Labo Staff

Gaji-Laboの社内デジタル環境でいろいろなお手伝いをしているがじ専務&じら常務。みんなのシリーズ記事をまとめたり、卒業したスタッフの過去記事を記録したり、Twitterをやったりしています。