@smarthr/i18n

v0.2.2

Published

8 hours ago

SmartHR's i18n utility

@smarthr/i18n

SmartHRの国際化（i18n）ユーティリティライブラリです。

主な機能

ロケールの取得
Reactコンポーネント向けの国際化サポート

サブパッケージ

get-locale: 複数の情報源から最適な言語コードを判定して返します。
use-intl: use-intlまたはnext-intlライブラリを利用して国際化（i18n）機能を提供するカスタムReactフックです。

インストール

npm install @smarthr/i18n

利用方法

各サブパッケージの詳細な使い方は、上記リンク先のREADMEをご参照ください。

Next.jsでの使用例

next-intlのGetting startedに従ってnext-intlの環境をセットアップします。ここではApp Routerでのi18nルーティングを使わないパターンで@smarthr/i18nを利用する例を記載します。

request.tsファイルでgetLocaleを利用してアプリケーションがサポートする言語からロケールを決定します。currentLocaleの取得はアプリケーションごとに実装するものとします。

import { getRequestConfig } from 'next-intl/server'
import { getLocale, Locale } from '@smarthr/i18n'
import { getUserLocale } from '@/getUserLocale'

const supportedLocales: Locale[] = ['ja-JP', 'en-US']

export default getRequestConfig(async () => {
  const currentLocale = await getUserLocale()

  const locale = getLocale({
    currentLocale,
    supportedLocales,
  })
  return {
    locale,
    messages: (await import(`./locales/${locale}.json`)).default,
  }
})

layout.tsxでNextIntlClientProviderを適用します。

import { NextIntlClientProvider } from 'next-intl'
import { getLocale } from 'next-intl/server'

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  const locale = await getLocale()
  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider>{children}</NextIntlClientProvider>
      </body>
    </html>
  )
}

多言語化を適用したいページでuseNextIntlを使います。 React Server Componentsで使う場合はワークアラウンドを利用します。

import { useNextIntl } from '@smarthr/i18n'

export default function Home() {
  const { formatMessage } = useNextIntl()
  return <div>{formatMessage('Home.greeting')}</div>
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@smarthr/i18n

主な機能

サブパッケージ

インストール

利用方法

Next.jsでの使用例