next-intl 2.21.0 β 2.22.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 +15 -18
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -23,48 +23,45 @@
|
|
|
23
23
|
|
|
24
24
|
Internationalization is an essential part of the user experience. next-intl gives you everything you need to get language subtleties right and has always got your back whenever you need to fine-tune a translation.
|
|
25
25
|
|
|
26
|
-
- π **ICU message syntax**: Localize your messages with interpolation,
|
|
26
|
+
- π **ICU message syntax**: Localize your messages with interpolation, cardinal & ordinal plurals, enum-based label selection and rich text.
|
|
27
27
|
- π
**Dates, times & numbers**: Apply appropriate formatting without worrying about server/client differences like time zones.
|
|
28
28
|
- β
**Type-safe**: Speed up development with autocompletion for message keys and catch typos early with compile-time checks.
|
|
29
29
|
- π‘ **Hooks-only API**: Learn a single API that can be used across your code base to turn translations into plain strings or rich text.
|
|
30
|
-
- π **
|
|
31
|
-
- βοΈ **
|
|
30
|
+
- π **Next.js-native and performance-obsessed**: App Router, Server Components, static renderingβpick the right tool for the right job, next-intl works everywhere.
|
|
31
|
+
- βοΈ **Internationalized routing**: Provide unique pathnames per language and optionally localize pathnames for search engine optimization.
|
|
32
32
|
|
|
33
33
|
## What does it look like?
|
|
34
34
|
|
|
35
35
|
This library is based on the premise that messages can be grouped by namespaces (typically a component name).
|
|
36
36
|
|
|
37
37
|
```jsx
|
|
38
|
-
//
|
|
39
|
-
import {useTranslations
|
|
38
|
+
// UserProfile.tsx
|
|
39
|
+
import {useTranslations} from 'next-intl';
|
|
40
40
|
|
|
41
|
-
function
|
|
42
|
-
const t = useTranslations('
|
|
43
|
-
const format = useFormatter();
|
|
41
|
+
export default function UserProfile({user}) {
|
|
42
|
+
const t = useTranslations('UserProfile');
|
|
44
43
|
|
|
45
44
|
return (
|
|
46
45
|
<section>
|
|
47
|
-
<
|
|
48
|
-
<p>{t('
|
|
49
|
-
<p>{t('
|
|
50
|
-
<Image alt={t('portrait', {username: user.name})} src={user.portrait} />
|
|
46
|
+
<h1>{t('title', {firstName: user.firstName})}</h1>
|
|
47
|
+
<p>{t('membership', {memberSince: user.memberSince})}</p>
|
|
48
|
+
<p>{t('followers', {count: user.numFollowers})}</p>
|
|
51
49
|
</section>
|
|
52
50
|
);
|
|
53
51
|
}
|
|
54
52
|
```
|
|
55
53
|
|
|
56
|
-
```
|
|
54
|
+
```json
|
|
57
55
|
// en.json
|
|
58
56
|
{
|
|
59
|
-
"
|
|
60
|
-
"title": "
|
|
57
|
+
"UserProfile": {
|
|
58
|
+
"title": "{username}'s profile",
|
|
59
|
+
"membership": "Member since {memberSince, date, short}",
|
|
61
60
|
"followers": "{count, plural, β΅
|
|
62
61
|
=0 {No followers yet} β΅
|
|
63
62
|
=1 {One follower} β΅
|
|
64
63
|
other {# followers} β΅
|
|
65
|
-
}"
|
|
66
|
-
"lastSeen": "Last seen {time}",
|
|
67
|
-
"portrait": "Portrait of {username}"
|
|
64
|
+
}"
|
|
68
65
|
}
|
|
69
66
|
}
|
|
70
67
|
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "next-intl",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.22.0",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"author": "Jan Amann <jan@amann.work>",
|
|
6
6
|
"description": "A minimal, but complete solution for internationalization in Next.js apps.",
|
|
@@ -68,10 +68,10 @@
|
|
|
68
68
|
"dependencies": {
|
|
69
69
|
"@formatjs/intl-localematcher": "^0.2.32",
|
|
70
70
|
"negotiator": "^0.6.3",
|
|
71
|
-
"use-intl": "^2.
|
|
71
|
+
"use-intl": "^2.22.0"
|
|
72
72
|
},
|
|
73
73
|
"peerDependencies": {
|
|
74
|
-
"next": "^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0",
|
|
74
|
+
"next": "^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 | ^14.0.0",
|
|
75
75
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
76
76
|
},
|
|
77
77
|
"devDependencies": {
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
"eslint": "^8.46.0",
|
|
86
86
|
"eslint-config-molindo": "^7.0.0",
|
|
87
87
|
"eslint-plugin-deprecation": "^1.4.1",
|
|
88
|
-
"next": "
|
|
88
|
+
"next": "14.0.1",
|
|
89
89
|
"path-to-regexp": "^6.2.1",
|
|
90
90
|
"react": "^18.2.0",
|
|
91
91
|
"react-dom": "^18.2.0",
|
|
@@ -106,5 +106,5 @@
|
|
|
106
106
|
"engines": {
|
|
107
107
|
"node": ">=10"
|
|
108
108
|
},
|
|
109
|
-
"gitHead": "
|
|
109
|
+
"gitHead": "f0d93a75b2e2fdc795cd38106ce1a211f5c0ae3e"
|
|
110
110
|
}
|