@better-intl/next 0.1.0 → 0.1.2

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.
Files changed (2) hide show
  1. package/README.md +189 -0
  2. package/package.json +5 -4
package/README.md ADDED
@@ -0,0 +1,189 @@
1
+ # @better-intl/next
2
+
3
+ Next.js App Router integration for **better-intl**.
4
+
5
+ ## Install
6
+
7
+ ```bash
8
+ npm install @better-intl/next @better-intl/react @better-intl/core @better-intl/compiler
9
+ ```
10
+
11
+ ## Quick Start
12
+
13
+ ### 1. Configure
14
+
15
+ ```json
16
+ // better-intl.config.json
17
+ {
18
+ "defaultLocale": "en",
19
+ "locales": ["en", "pt-BR", "es"],
20
+ "catalogs": "./locales/{locale}.json",
21
+ "include": ["app/**/*.tsx"]
22
+ }
23
+ ```
24
+
25
+ ### 2. Plugin (next.config.js)
26
+
27
+ ```js
28
+ import { withBetterIntl } from "@better-intl/next/plugin";
29
+
30
+ export default withBetterIntl({
31
+ locales: ["en", "pt-BR", "es"],
32
+ defaultLocale: "en",
33
+ })({
34
+ // your next config
35
+ });
36
+ ```
37
+
38
+ ### 3. Middleware
39
+
40
+ ```ts
41
+ // middleware.ts
42
+ import { createIntlMiddleware } from "@better-intl/next/middleware";
43
+
44
+ export default createIntlMiddleware({
45
+ locales: ["en", "pt-BR", "es"],
46
+ defaultLocale: "en",
47
+ });
48
+
49
+ export const config = { matcher: ["/((?!api|_next|.*\\..*).*)"] };
50
+ ```
51
+
52
+ ### 4. Layout
53
+
54
+ ```tsx
55
+ // app/[locale]/layout.tsx
56
+ import { NextIntlClientProvider } from "@better-intl/next";
57
+
58
+ export default async function Layout({
59
+ children,
60
+ params,
61
+ }: {
62
+ children: React.ReactNode;
63
+ params: Promise<{ locale: string }>;
64
+ }) {
65
+ const { locale } = await params;
66
+ const messages = (await import(`../../locales/${locale}.json`)).default;
67
+
68
+ return (
69
+ <html lang={locale}>
70
+ <body>
71
+ <NextIntlClientProvider locale={locale} messages={messages}>
72
+ {children}
73
+ </NextIntlClientProvider>
74
+ </body>
75
+ </html>
76
+ );
77
+ }
78
+ ```
79
+
80
+ ### 5. Write normal JSX
81
+
82
+ ```tsx
83
+ // app/[locale]/page.tsx
84
+ export default function Page() {
85
+ return (
86
+ <section>
87
+ <h1>Hello world</h1>
88
+ <p>The best SaaS platform</p>
89
+ <button type="button">Get started</button>
90
+ </section>
91
+ );
92
+ }
93
+ ```
94
+
95
+ That's it. No `t()` calls, no hooks, no imports. The Babel plugin transforms your JSX automatically at build time:
96
+
97
+ ```tsx
98
+ // What the compiler generates behind the scenes:
99
+ import { useTranslation } from "@better-intl/react";
100
+
101
+ export default function Page() {
102
+ const { t: __t } = useTranslation();
103
+ return (
104
+ <section>
105
+ <h1>{__t("0rr2b7c", undefined, "Hello world")}</h1>
106
+ <p>{__t("1di71qw", undefined, "The best SaaS platform")}</p>
107
+ <button type="button">{__t("1gvrrqk", undefined, "Get started")}</button>
108
+ </section>
109
+ );
110
+ }
111
+ ```
112
+
113
+ Enable it via Babel:
114
+
115
+ ```js
116
+ // babel.config.js
117
+ module.exports = {
118
+ plugins: [["@better-intl/compiler/babel", { mode: "auto" }]],
119
+ };
120
+ ```
121
+
122
+ Or for zero-runtime (inlines translations at build time):
123
+
124
+ ```js
125
+ module.exports = {
126
+ plugins: [
127
+ ["@better-intl/compiler/babel", {
128
+ locale: "pt-BR",
129
+ messages: require("./locales/pt-BR.json"),
130
+ }],
131
+ ],
132
+ };
133
+ ```
134
+
135
+ ## Server Components (RSC)
136
+
137
+ For React Server Components where hooks aren't available, use `getTranslator`:
138
+
139
+ ```tsx
140
+ // app/[locale]/page.tsx
141
+ import { getTranslator } from "@better-intl/next/server";
142
+
143
+ export default async function Page({
144
+ params,
145
+ }: {
146
+ params: Promise<{ locale: string }>;
147
+ }) {
148
+ const { locale } = await params;
149
+ const t = await getTranslator(locale, () =>
150
+ import(`../../locales/${locale}.json`)
151
+ );
152
+
153
+ return <h1>{t("greeting")}</h1>;
154
+ }
155
+ ```
156
+
157
+ ## Metadata
158
+
159
+ ```tsx
160
+ import { getMetadataTranslator } from "@better-intl/next/server";
161
+
162
+ export async function generateMetadata({
163
+ params,
164
+ }: {
165
+ params: Promise<{ locale: string }>;
166
+ }) {
167
+ const { locale } = await params;
168
+ const t = await getMetadataTranslator(locale, () =>
169
+ import(`../../locales/${locale}.json`)
170
+ );
171
+
172
+ return { title: t("page.title") };
173
+ }
174
+ ```
175
+
176
+ ## API
177
+
178
+ | Export | Entry point | Description |
179
+ |--------|-------------|-------------|
180
+ | `NextIntlClientProvider` | `@better-intl/next` | Client provider for layouts |
181
+ | `createIntlMiddleware(config)` | `@better-intl/next/middleware` | Locale detection and routing |
182
+ | `getTranslator(locale, loader)` | `@better-intl/next/server` | Server-side `t()` for RSC |
183
+ | `getMetadataTranslator(locale, loader)` | `@better-intl/next/server` | For `generateMetadata` |
184
+ | `getMessages(loader)` | `@better-intl/next/server` | Load messages for a locale |
185
+ | `withBetterIntl(config)` | `@better-intl/next/plugin` | next.config.js plugin |
186
+
187
+ ## License
188
+
189
+ MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@better-intl/next",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
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.0",
36
- "@better-intl/react": "0.1.0"
36
+ "@better-intl/core": "0.1.2",
37
+ "@better-intl/react": "0.1.2"
37
38
  },
38
39
  "peerDependencies": {
39
40
  "next": ">=14.0.0",