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が提供する認証系の言語をパスベースなどで変更できるようになりました。