@better-intl/next 0.1.0 → 0.1.1
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 +117 -0
- package/package.json +5 -4
package/README.md
ADDED
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
# @better-intl/next
|
|
2
|
+
|
|
3
|
+
Next.js App Router integration for **better-intl**.
|
|
4
|
+
|
|
5
|
+
Middleware for locale routing, client/server providers, and RSC support.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @better-intl/next @better-intl/react @better-intl/core
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
### 1. Middleware
|
|
16
|
+
|
|
17
|
+
```ts
|
|
18
|
+
// middleware.ts
|
|
19
|
+
import { createIntlMiddleware } from "@better-intl/next/middleware";
|
|
20
|
+
|
|
21
|
+
export default createIntlMiddleware({
|
|
22
|
+
locales: ["en", "pt-BR", "es"],
|
|
23
|
+
defaultLocale: "en",
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
export const config = { matcher: ["/((?!api|_next|.*\\..*).*)"] };
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
### 2. Layout with client provider
|
|
30
|
+
|
|
31
|
+
```tsx
|
|
32
|
+
// app/[locale]/layout.tsx
|
|
33
|
+
import { NextIntlClientProvider } from "@better-intl/next";
|
|
34
|
+
|
|
35
|
+
export default async function Layout({
|
|
36
|
+
children,
|
|
37
|
+
params,
|
|
38
|
+
}: {
|
|
39
|
+
children: React.ReactNode;
|
|
40
|
+
params: Promise<{ locale: string }>;
|
|
41
|
+
}) {
|
|
42
|
+
const { locale } = await params;
|
|
43
|
+
const messages = (await import(`../../locales/${locale}.json`)).default;
|
|
44
|
+
|
|
45
|
+
return (
|
|
46
|
+
<html lang={locale}>
|
|
47
|
+
<body>
|
|
48
|
+
<NextIntlClientProvider locale={locale} messages={messages}>
|
|
49
|
+
{children}
|
|
50
|
+
</NextIntlClientProvider>
|
|
51
|
+
</body>
|
|
52
|
+
</html>
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### 3. Server Components (RSC)
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
// app/[locale]/page.tsx
|
|
61
|
+
import { getTranslator } from "@better-intl/next/server";
|
|
62
|
+
|
|
63
|
+
export default async function Page({
|
|
64
|
+
params,
|
|
65
|
+
}: {
|
|
66
|
+
params: Promise<{ locale: string }>;
|
|
67
|
+
}) {
|
|
68
|
+
const { locale } = await params;
|
|
69
|
+
const t = await getTranslator(locale, () =>
|
|
70
|
+
import(`../../locales/${locale}.json`)
|
|
71
|
+
);
|
|
72
|
+
|
|
73
|
+
return <h1>{t("greeting")}</h1>;
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### 4. Metadata translations
|
|
78
|
+
|
|
79
|
+
```tsx
|
|
80
|
+
import { getMetadataTranslator } from "@better-intl/next/server";
|
|
81
|
+
|
|
82
|
+
export async function generateMetadata({ params }) {
|
|
83
|
+
const { locale } = await params;
|
|
84
|
+
const t = await getMetadataTranslator(locale, () =>
|
|
85
|
+
import(`../../locales/${locale}.json`)
|
|
86
|
+
);
|
|
87
|
+
|
|
88
|
+
return { title: t("page.title") };
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### 5. Next.js plugin
|
|
93
|
+
|
|
94
|
+
```js
|
|
95
|
+
// next.config.js
|
|
96
|
+
import { withBetterIntl } from "@better-intl/next/plugin";
|
|
97
|
+
|
|
98
|
+
export default withBetterIntl({
|
|
99
|
+
locales: ["en", "pt-BR", "es"],
|
|
100
|
+
defaultLocale: "en",
|
|
101
|
+
})({});
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## API
|
|
105
|
+
|
|
106
|
+
| Export | Entry point | Description |
|
|
107
|
+
|--------|-------------|-------------|
|
|
108
|
+
| `NextIntlClientProvider` | `@better-intl/next` | Client provider for layouts |
|
|
109
|
+
| `createIntlMiddleware(config)` | `@better-intl/next/middleware` | Locale detection and routing |
|
|
110
|
+
| `getTranslator(locale, loader)` | `@better-intl/next/server` | Server-side `t()` function |
|
|
111
|
+
| `getMetadataTranslator(locale, loader)` | `@better-intl/next/server` | For `generateMetadata` |
|
|
112
|
+
| `getMessages(loader)` | `@better-intl/next/server` | Load messages for a locale |
|
|
113
|
+
| `withBetterIntl(config)` | `@better-intl/next/plugin` | next.config.js plugin |
|
|
114
|
+
|
|
115
|
+
## License
|
|
116
|
+
|
|
117
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@better-intl/next",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Next.js App Router integration for better-intl",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -29,11 +29,12 @@
|
|
|
29
29
|
}
|
|
30
30
|
},
|
|
31
31
|
"files": [
|
|
32
|
-
"dist"
|
|
32
|
+
"dist",
|
|
33
|
+
"README.md"
|
|
33
34
|
],
|
|
34
35
|
"dependencies": {
|
|
35
|
-
"@better-intl/core": "0.1.
|
|
36
|
-
"@better-intl/react": "0.1.
|
|
36
|
+
"@better-intl/core": "0.1.1",
|
|
37
|
+
"@better-intl/react": "0.1.1"
|
|
37
38
|
},
|
|
38
39
|
"peerDependencies": {
|
|
39
40
|
"next": ">=14.0.0",
|