たった 10 分で Next.js アプリを日本語対応させた話

Yuya, Next.jsReacti18nTypeScript
Back

こんにちは。 @yuyaaaar です。

1日に何回投稿するねんって話なんですが、ご容赦ください。

今回は、自分の運用しているサイト を秒速で i18n 対応できたので、そのやり方を書いていきます。

Next.js 10 以前は、next-i18nextみたいなパッケージを使って、ちょっとハッキーなことをしないとなかなか i18n 対応 + Next.js の恩恵をフルで受ける方法はなかったのですが、Next.js 10 からは i18n はオフィシャル的にサポートされました。

やり方はめちゃくちゃ簡単で、 next.config.js にサポートしたいロケールとデフォルトを指定するだけ。

module.exports = {
  i18n: {
    locales: ["en", "ja"],
    defaultLocale: "en",
  },
};

以上。これで、例えば loggnog.com の場合、

デフォルトは英語で loggnog.com

日本語の場合は loggnog.com/ja

で同じページをアクセスすることができます。しかもちゃんとロケールごとに静的生成されるのもいいですよね。

どうやってユーザーのロケールを判断しているかというと、Accept-Language を確認して、それ相応のロケールに自動的に URL を変えてくれます。

ただ一つネックなのは、↑ の自動ルーティングはアプリケーションルートでしか行われません。ということは、example.com のみ検知され、 example.com/app とかの場合だと検知してくれません。ですが、今後需要があれば nested routes の自動検知対応も視野に入れるそうです。

翻訳を加えるには、まず useRouter からロケールを摘出します

import { useRouter } from "next/router";
const App = () => {
const { locale } = useRouter(); // 現在のロケールを表示してくれる
// ..
};

まぁここからは翻訳ライブラリを使ったりしてもいいのですが、自分の場合はシンプルだったので、 en.jsja.js というファイルを作り、その中にオブジェクトとして翻訳を入れちゃってます。

// ja.js
export default {
SUBTITLE: "「満足」を可視化しよう",
TO_DASHBOARD: "ダッシュボードへ",
// ...
};
// en.js
export default {
SUBTITLE: "Visualize your customer happiness.",
TO_DASHBOARD: "Go to dashboard",
// ...
};

そして、これらのファイルをインポート、ロケールを照らし合わせて適切な翻訳を引っ張ってくる、ていう仕組み。

import { useRouter } from "next/router";
import en from "../../locales/en";
import ja from "../../locales/ja";
const App = () => {
const { locale } = useRouter();
const t = locale === "en" ? en : ja;
return (
<div>
...
<h1>{t.SUBTITLE}</h1>
<button>{t.TO_DASHBOARD}</button>
</div>
);
};

おまけですが、毎回ルーターモジュールと翻訳ファイルをインポートするのもめんどいので、 hook にしちゃいましょう

// hooks/useLocale.ts
import en from "../../locales/en";
import ja from "../../locales/ja";
import { useRouter } from "next/router";
export const useLocale = () => {
const { locale } = useRouter();
const t = locale === "en" ? en : ja;
return { locale, t };
};

これだけで、二か国語対応が完了しちゃいます。

以上!

© Yuya Oiwa