@smarthr/i18n 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +82 -0
- package/package.json +15 -2
package/README.md
CHANGED
|
@@ -1,3 +1,85 @@
|
|
|
1
1
|
# @smarthr/i18n
|
|
2
2
|
|
|
3
3
|
SmartHRの国際化（i18n）ユーティリティライブラリです。
|
|
4
|
+
|
|
5
|
+
## 主な機能
|
|
6
|
+
|
|
7
|
+
- ロケールの取得
|
|
8
|
+
- Reactコンポーネント向けの国際化サポート
|
|
9
|
+
|
|
10
|
+
## サブパッケージ
|
|
11
|
+
|
|
12
|
+
- [`get-locale`](./src/get-locale/README.md): 複数の情報源から最適な言語コードを判定して返します。
|
|
13
|
+
- [`use-intl`](./src/use-intl/README.md): `use-intl`または`next-intl`ライブラリを利用して国際化（i18n）機能を提供するカスタムReactフックです。
|
|
14
|
+
|
|
15
|
+
## インストール
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install @smarthr/i18n
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## 利用方法
|
|
22
|
+
|
|
23
|
+
各サブパッケージの詳細な使い方は、上記リンク先のREADMEをご参照ください。
|
|
24
|
+
|
|
25
|
+
### Next.jsでの使用例
|
|
26
|
+
|
|
27
|
+
[next-intlのGetting started](https://next-intl.dev/docs/getting-started)に従って`next-intl`の環境をセットアップします。
|
|
28
|
+
ここではApp Routerでの[i18nルーティングを使わないパターン](https://next-intl.dev/docs/getting-started/app-router/without-i18n-routing)で`@smarthr/i18n`を利用する例を記載します。
|
|
29
|
+
|
|
30
|
+
`request.ts`ファイルで`getLocale`を利用してアプリケーションがサポートする言語からロケールを決定します。`currentLocale`の取得はアプリケーションごとに実装するものとします。
|
|
31
|
+
|
|
32
|
+
```ts
|
|
33
|
+
import { getRequestConfig } from 'next-intl/server'
|
|
34
|
+
import { getLocale, Locale } from '@smarthr/i18n'
|
|
35
|
+
import { getUserLocale } from '@/getUserLocale'
|
|
36
|
+
|
|
37
|
+
const supportedLocales: Locale[] = ['ja-JP', 'en-US']
|
|
38
|
+
|
|
39
|
+
export default getRequestConfig(async () => {
|
|
40
|
+
const currentLocale = await getUserLocale()
|
|
41
|
+
|
|
42
|
+
const locale = getLocale({
|
|
43
|
+
currentLocale,
|
|
44
|
+
supportedLocales,
|
|
45
|
+
})
|
|
46
|
+
return {
|
|
47
|
+
locale,
|
|
48
|
+
messages: (await import(`./locales/${locale}.json`)).default,
|
|
49
|
+
}
|
|
50
|
+
})
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
`layout.tsx`で`NextIntlClientProvider`を適用します。
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
import { NextIntlClientProvider } from 'next-intl'
|
|
57
|
+
import { getLocale } from 'next-intl/server'
|
|
58
|
+
|
|
59
|
+
export default async function RootLayout({
|
|
60
|
+
children,
|
|
61
|
+
}: Readonly<{
|
|
62
|
+
children: React.ReactNode
|
|
63
|
+
}>) {
|
|
64
|
+
const locale = await getLocale()
|
|
65
|
+
return (
|
|
66
|
+
<html lang={locale}>
|
|
67
|
+
<body>
|
|
68
|
+
<NextIntlClientProvider>{children}</NextIntlClientProvider>
|
|
69
|
+
</body>
|
|
70
|
+
</html>
|
|
71
|
+
)
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
多言語化を適用したいページで`useNextIntl`を使います。
|
|
76
|
+
React Server Componentsで使う場合は[ワークアラウンド](./src/use-intl/README.md#react-server-componentsで使う場合のワークアラウンド)を利用します。
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
import { useNextIntl } from '@smarthr/i18n'
|
|
80
|
+
|
|
81
|
+
export default function Home() {
|
|
82
|
+
const { formatMessage } = useNextIntl()
|
|
83
|
+
return <div>{formatMessage('Home.greeting')}</div>
|
|
84
|
+
}
|
|
85
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@smarthr/i18n",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "SmartHR's i18n utility",
|
|
5
5
|
"author": "SmartHR",
|
|
6
6
|
"homepage": "https://github.com/kufu/tamatebako/tree/master/packages/i18n",
|
|
@@ -25,5 +25,18 @@
|
|
|
25
25
|
"prebuild": "pnpm clean",
|
|
26
26
|
"clean": "rimraf lib"
|
|
27
27
|
},
|
|
28
|
-
"
|
|
28
|
+
"peerDependencies": {
|
|
29
|
+
"next": "^14.0.0 || ^15.0.0",
|
|
30
|
+
"react": "^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0"
|
|
31
|
+
},
|
|
32
|
+
"devDependencies": {
|
|
33
|
+
"@testing-library/dom": "^10.4.0",
|
|
34
|
+
"@testing-library/react": "^16.3.0",
|
|
35
|
+
"@types/react": "^19.1.9",
|
|
36
|
+
"jest-environment-jsdom": "^30.0.5",
|
|
37
|
+
"next-intl": "^4.3.4",
|
|
38
|
+
"react": "^19.1.0",
|
|
39
|
+
"use-intl": "^4.3.4"
|
|
40
|
+
},
|
|
41
|
+
"gitHead": "c258ee8be8942c4ddd8251af2b1b40d31bcb6dd2"
|
|
29
42
|
}
|