Next.jsでの言語切り替えUX設計

Next.jsでは、i18n（国際化）機能を使って多言語対応を実装することができますが、言語切り替えのUX設計を工夫することで、ユーザー体験を大幅に向上させることが可能です。以下では、具体的な方法やポイントを紹介します。

リロードなしでスムーズな言語切り替え

言語切り替え時にページをリロードすることなく、スムーズなUXを実現するためには、useRouterを利用して言語ごとのURLパスを管理するのが有効です。useRouterを使うと、ページ全体を再ロードせずに言語を変更でき、ユーザーの体験を途切れさせないまま切り替えが可能です。 具体的には、以下のような構造で言語切り替えを実装できます。

import { useRouter } from 'next/router';
const LanguageSwitcher = () => {
  const router = useRouter();
  const changeLanguage = (locale) => {
    router.push(router.pathname, router.asPath, { locale });
  };
  return (
    <div>
      <button onClick={() => changeLanguage('ja')}>日本語</button>
      <button onClick={() => changeLanguage('en')}>English</button>
    </div>
  );
};

このコードにより、ユーザーがボタンをクリックするとURLのパスが変更され、言語に応じたページが即座に表示されます。

URLとロケールの管理

Next.jsのi18n機能では、言語ごとに異なるURLパスを生成することができ、SEOにも効果的です。例えば、/en/aboutや/ja/aboutのようにURLにロケールを含めることで、どの言語でページが表示されているかが明確になります。 また、ユーザーが誤って異なる言語のページにアクセスした場合でも、適切な言語切り替えメニューを提供することで、スムーズに正しい言語へ切り替えが可能です。

<Link href="/about" locale="ja">日本語</Link>
<Link href="/about" locale="en">English</Link>

これにより、リンクをクリックするだけで、選択した言語に対応するページに遷移します。

言語切り替えメニューのデザイン

言語切り替えメニューは、目立ちやすく、アクセスしやすい場所に配置するのが理想です。一般的には、ヘッダーやフッターにドロップダウンメニュー形式で配置することが多いです。例えば、以下のようなLocaleSwitchコンポーネントを使って、シンプルな切り替えメニューを作成できます。

const LocaleSwitch = () => {
  const { setLocale } = useLocales();
  return (
    <div>
      <button onClick={() => setLocale('ja')}>日本語</button>
      <button onClick={() => setLocale('en')}>English</button>
    </div>
  );
};

言語ごとのコンテンツ管理

各言語に応じたコンテンツを効率的に管理するために、翻訳ファイル（JSON形式）を使用するのが一般的です。useLocaleフックを作成し、現在の言語に応じたテキストを取得し、適切なコンテンツを表示します。

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

これにより、各コンポーネントでuseLocaleを呼び出すことで、簡単に言語ごとのテキストを表示できます。

まとめ

Next.jsを使った多言語対応では、リロードなしでの言語切り替えや、ユーザーが迷わないデザインが重要です。useRouterやi18nを駆使してスムーズなUXを実現し、各言語に最適化されたコンテンツを提供することで、ユーザー体験を大幅に向上させることができます。