Clerkで多言語に対応してみた（Remix編）

Clerkが提供する多言語対応ライブラリを試してみましたので、使い方などをまとめました。

Clerkが提供する多言語対応ライブラリを試してみましたので、使い方などをまとめました。この記事ではRemixアプリに導入しています。

ライブラリのインストール

Clerkが多言語対応のライブラリを出していますので、インストールしましょう。

npm i @clerk/localizations

翻訳の辞書的なものが含まれてますので、ClerkAppのlocalizationへ使いたい言語を渡しましょう。


import { jaJP } from '@clerk/localizations'
...

export default ClerkApp(App, {
  localization: jaJP
});

もしClerkProviderを使っている場合は、localizationに渡します。

        <ClerkProvider
          clerkState={loaderData.clerkState}
          localization={jaJP}
        >
        <Header />
        <div className='py-10'>
          {children}
        </div>
        <Footer />
        <ScrollRestoration />
        <Scripts />
        </ClerkProvider>

言語を切り替える機能を実装する

Clerkが提供するUIの言語を変えてみましょう。今回はURLのパスを見て言語を判定するRemixアプリを例にします。

export const useCurrentLocale = () => {
    const { pathname } = useLocation()
    const { lang } = useParams()
    const currentLocale = useMemo(() => {
        if (lang) {
            return lang?.includes('en') ? 'en' : 'ja'
        }
        return pathname.startsWith('/en') ? 'en' : 'ja'
    }, [lang,pathname])
    return {
        currentLocale
    }
}

先ほどのHookが返してくる言語を元に、ClerkProviderのlocalizationに渡す辞書を変更します。

export function Layout({ children }: { children: React.ReactNode }) {
  const loaderData = useLoaderData<{ clerkState: any }>();
  const { currentLocale } = useCurrentLocale()
  return (
    <html lang="en" className='h-full bg-gray-100'>
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script
          async
          src="https://js.stripe.com/v3/pricing-table.js">
        </script>
        <Meta />
        <Links />
      </head>
      <body>
        <ClerkProvider
          clerkState={loaderData.clerkState}
          localization={currentLocale === 'ja' ? jaJP: enUS }
        >
          {children}
        <ScrollRestoration />
        <Scripts />
        </ClerkProvider>
      </body>
    </html>
  );
}

これでClerkが提供する認証系の言語をパスベースなどで変更できるようになりました。