Next.jsでRTL対応を行うにはどうすればいいですか？

Next.jsでRTL対応を行うには、HTMLのdir属性を動的に設定し、Tailwind CSSやnext-i18nextを活用してテキストやUIコンポーネントの方向を制御します。dir="rtl"をhtmlタグやコンポーネントに設定し、動的に言語に応じた方向変更が可能です。

RTLに対応するためのCSSの設定方法は？

CSSの論理プロパティ（例 ms-0やpe-5）を使うことで、RTLとLTRの間でスタイルを簡単に切り替えられます。また、Tailwind CSS v3.3.0以降では、RTLサポートが追加されており、rtlクラスを使ってレイアウトやスタイルの方向を切り替えることができます。

ロケールごとに動的にRTLとLTRを切り替えるには？

Next.jsのuseRouterフックを使い、ユーザーの選択した言語に応じてHTMLのdir属性を動的に設定できます。localeに基づいてrtlまたはltrを適用し、全体のレイアウトを変更できます。

【Next.js】右から左に読む言語（RTL）への対応

概要

Next.jsアプリケーションで、アラビア語やヘブライ語など右から左に読む言語（RTL）への対応は、グローバルユーザーに向けた重要な機能です。本記事では、Next.jsでnext-i18nextとCSSの設定を使って、簡単にRTL対応を実装する方法を解説します。

RTL対応の基本設定

まず、HTMLのdir属性を使ってテキストの方向を制御します。dir="rtl"を使えば、ページ全体や特定の要素にRTLを適用できます。

import { useRouter } from 'next/router';
import { useEffect } from 'react';
function MyApp({ Component, pageProps }) {
  const { locale } = useRouter();
  useEffect(() => {
    const dir = locale === 'ar' ? 'rtl' : 'ltr';
    document.documentElement.setAttribute('dir', dir);
  }, [locale]);
  return <Component {...pageProps} />;
}
export default MyApp;

このコードでは、ユーザーの言語設定に応じてdir属性を動的に変更します。

next-i18nextを使った多言語対応

Next.jsでの多言語対応には、next-i18nextを使用します。RTL対応の言語（例: アラビア語）を設定し、翻訳ファイルを用意します。public/localesディレクトリに言語ごとの翻訳ファイルを配置し、次のように設定します。

// next-i18next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'ar'],
    defaultLocale: 'en',
  },
};

これにより、ユーザーの選択した言語に応じたテキストが表示され、RTL言語が自動的に右から左にレイアウトされます。

Tailwind CSSによるRTLサポート

Tailwind CSSを使用している場合、v3.3.0以降ではRTLサポートが組み込まれており、rtlクラスでレイアウトを簡単に変更できます。これにより、スタイルの方向（margin、paddingなど）が自動的にRTLに適応します。

<html dir="rtl">
  <div class="rtl:bg-gray-200 rtl:text-right">
    <!-- RTL対応のコンテンツ -->
  </div>
</html>

さらに、ms-0（左マージン）やpe-5（右パディング）などの論理プロパティを使用することで、左右のレイアウトが適切に反転されます。

ロケール切り替え機能

Next.jsのuseRouterフックを使って、ユーザーが言語を変更できるスイッチャーを作成します。言語変更に応じて、レイアウトが自動的にRTLに切り替わります。

import { useRouter } from 'next/router';
const LocaleSwitcher = () => {
  const { locale, locales, asPath } = useRouter();
  
  return (
    <div>
      {locales.map((loc) => (
        <button key={loc} onClick={() => router.push(asPath, asPath, { locale: loc })}>
          {loc}
        </button>
      ))}
    </div>
  );
};

このようにして、ユーザーが言語を切り替えると同時に、ページ全体のRTL設定が適用されます。

まとめ

Next.jsでのRTL対応は、dir属性やCSSの論理プロパティを活用することで簡単に実現できます。next-i18nextやTailwind CSSを組み合わせることで、グローバル対応したアプリケーションの構築が効率化されます。適切な設定により、右から左に読む言語も問題なくサポートできるようになります。