next-intlを用いて個人ブログを多言語対応する

Intro

Next.js(app router)で構築されている本ブログをnext-intlを用いて英語対応したので報告と感想の紹介です。

next-intlは、App Routerに対応した設計になっており、公式ドキュメントもそれに沿っています。必要な設定ファイルが少なく、導入がスムーズだったことが採用の決め手でした。

Next.jsのi18n（Internationalization, 多言語化）対応について、next-i18nextなどが人気でしたが、app routerでi18n対応する場合はnext-intl一択なのではとうい状況になっていと感じています。

差分は以下で公開しているので気になる方は覗いてください。 https://github.com/nyankiti/tech-blog/pull/8

next-intl の良いところ

Server Component対応されており、Client ComponentとServer Componentの使い分けが明確。

• Server Componentの場合: getTranslationsを利用する

HomePage
import {getTranslations} from 'next-intl/server';
 
export default async function HomePage() {
  const t = await getTranslations('HomePage');
  return <h1>{t('title')}</h1>;
}

• Clinet Componentの場合: useTranslationsを利用する

HomePage
import {useTranslations} from 'next-intl';
import {Link} from '@/i18n/navigation';
 
export default function HomePage() {
  const t = useTranslations('HomePage');
  return (
    <div>
      <h1>{t('title')}</h1>
      <Link href="/about">{t('about')}</Link>
    </div>
  );
}

TypeScriptとの親和性

以下のページを参考に型を設定を追加すると、すぐにTypescriptによる恩恵を受けることができ、翻訳漏れやスペルミスを事前に防ぐことができます。 https://next-intl.dev/docs/workflows/typescript

• 対応している言語に合わせて localeの値がユニオン型として推論される

import {useLocale} from 'next-intl';
 
// ✅ 'en' | 'ja'
const locale = useLocale();

• 対応しているメッセージが推論される

messages.json
{
  "About": {
    "title": "Hello"
  }
}

About.tsx
function About() {
  // ✅ Valid namespace
  const t = useTranslations('About');
  // ⚠️ Aboutにdescriptionキーを定義していないので警告
  t('description');
  // ✅ Valid message key
  t('title');
}

Outro

next-intlを試すために「じゃあブログを英語対応してみよう！」という流れで導入してみました。

これをきっかけに、英語の勉強も兼ねて少しずつ英語での記事執筆にも挑戦していけたらと思っています。