【Nuxt3】簡単！i18nで多言語化対応&パフォーマンス最適化！

Posted at 2024-10-06

閲覧頂き、ありがとうございます🙇

この記事は、Nuxt3の多言語対応を行うために
@nuxtjs/i18nの導入とパフォーマンスの最適化の手順を紹介します！

前提

name	version
Nuxt.js(Vue.js)	v3.x

経緯

Nuxt3で多言語化対応をする方法を調べていき@nuxtjs/i18nに辿り着きました。
導入方法とともに、各言語の定義ファイルを効率よく読み込む方法を調査・実装しました。

ざっくり3行まとめ💨

@nuxtjs/i18nをインストールし、各言語の定義ファイルを用意することで多言語化対応が可能🌏
デフォルトのままでは現在表示中の言語以外の定義ファイルも読み込んでしまい重くなる🏋️
遅延読み込みのオプションがあり、パフォーマンスが最適化できる💯

@nuxtjs/i18n の導入

インストール📝

$ npm i @nuxtjs/i18n

nuxt.config.tsの設定📝

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/i18n',
  ],
  i18n: {
    strategy: 'prefix_except_default', // デフォルト言語はプレフィックス無し
    defaultLocale: 'ja', // デフォルト言語を日本語
    // 各言語の設定
    locales: [
      { code: 'ja', language: 'ja-JP', name: 'Japanese', file: 'ja.ts' },
      { code: 'en', language: 'en-US', name: 'English', file: 'en.ts' },
      { code: 'fr', language: 'fr-FR', name: 'French', file: 'fr.ts' },
    ],
    // 言語ファイルが格納されているファイル(外部ファイルかする場合)
    langDir: 'locales',
  },
})

翻訳ファイルの作成📝

今回は、「日本語」「英語」「フランス語」で、
「こんにちは」を各言語で表示するための設定をします。

locales/ja.ts

export default defineI18nLocale(async () => ({
  // nameはテキストを表示する際に引数を渡すことができる部分
  hello: 'こんにちは、{name}！',
  language: '言語',
}))

locales/en.ts

export default defineI18nLocale(async () => ({
  hello: 'Hello, {name}!',
  language: 'Language',
}))

locales/fr.ts

export default defineI18nLocale(async () => ({
  hello: 'Bonjour, {name}!',
  language: 'Langue',
}))

Vueファイルに実装📝

今回は<NuxtPage />を使用し、トップページに実装します！

pages/index.vue

<script setup lang="ts">
// setLocaleは現在の表示言語を切り替えるための関数
const { setLocale } = useI18n()
</script>
<template>
  <div>
    <!-- $tは翻訳ファイルを参照するために使用する関数 -->
    <h1>{{ $t('hello', {name: 'vue-i18n'}) }}</h1>
    <p>{{ $t('language') }}</p>
    <button @click="setLocale('ja')">ja</button>
    <button @click="setLocale('en')">en</button>
    <button @click="setLocale('fr')">fr</button>
  </div>
</template>

画面の確認👀

ボタンの切り替えで各言語の切り替えできていることを確認できました！

ここで問題が発生🚨

初回の読み込み時点で、
他言語(英語とフランス語)の翻訳ファイルも読み込んでしまい、
パフォーマンスの低下につながらないか気になった🤔

翻訳ファイルの遅延読み込みをする⚒️

@nuxtjs/i18nには遅延読み込み(LazyLoad)機能があり、
こちらで懸念点の解消できたので紹介！

対応方法としては、
nuxt.config.tsに1つだけオプションを追加するだけ💡

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/i18n',
  ],
  i18n: {
    strategy: 'prefix_except_default',
    defaultLocale: 'ja',
    locales: [
      { code: 'ja', language: 'ja-JP', name: 'Japanese', file: 'ja.ts' },
      { code: 'en', language: 'en-US', name: 'English', file: 'en.ts' },
      { code: 'fr', language: 'fr-FR', name: 'French', file: 'fr.ts' },
    ],
    lazy: true, // ←←←　ここを追加📝
    langDir: 'locales',
  },
})

再度確認してみると・・・

初回読み込みではja.ts(デフォルト言語)のみ読み込みとなりました🎉
また他言語は選択時に翻訳ファイルが読み込まれるようになりました🎉

最後に🍵

今回はNuxt3での多言語化について学びました！
細かな設定はまだまだあると思うのですが、最低限の実装完了ができました！

大規模サイトとなって場合、
どのように翻訳ファイルを作るのかがあまり想像ついてませんが、
自動翻訳より精度の高いテキストを出すことができることは良いと思いました！

実務での利用は僕自身まだないですが、
グローバルな対応はサービスの価値を世界に発信できるので、
利用してみたいです！

宣伝・・・

以下の記事も書いているので見てくれたら喜びます🐸

参考記事

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up