@verbaly/next 0.21.0 → 0.23.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 +8 -8
- package/dist/client.d.ts +2 -3
- package/dist/client.js.map +1 -1
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<img src="https://raw.githubusercontent.com/AronSoto/verbaly/develop/assets/logo.png" alt="Verbaly" width="300" />
|
|
3
3
|
</p>
|
|
4
4
|
|
|
5
|
-
<p align="center"><em>Next.js integration for Verbaly
|
|
5
|
+
<p align="center"><em>Next.js integration for Verbaly: App Router/RSC with per-request locale negotiation, Turbopack and webpack support, flash-free hydration.</em></p>
|
|
6
6
|
|
|
7
7
|
<p align="center">
|
|
8
8
|
<a href="https://www.npmjs.com/package/@verbaly/next"><img src="https://img.shields.io/npm/v/@verbaly/next?logo=npm&color=cb3837" alt="npm version" /></a>
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
|
|
12
12
|
---
|
|
13
13
|
|
|
14
|
-
Server Components render already translated in the visitor's language
|
|
14
|
+
Server Components render already translated in the visitor's language (cookie first, then `Accept-Language`, then your fallback) and Client Components hydrate with the **same locale and the same catalog**: no flash of untranslated text, no hydration mismatch. Each request gets its **own instance** (React `cache()`): no locale leaking between concurrent users.
|
|
15
15
|
|
|
16
16
|
Works with **Turbopack** (the Next 16 default) and webpack: the config wrapper generates the runtime module as real files and wires the `t`-template compiler as a loader for both.
|
|
17
17
|
|
|
@@ -23,7 +23,7 @@ pnpm add verbaly @verbaly/next @verbaly/react
|
|
|
23
23
|
|
|
24
24
|
## ⚡ Wire it up
|
|
25
25
|
|
|
26
|
-
**1. The config wrapper
|
|
26
|
+
**1. The config wrapper**, the whole build setup:
|
|
27
27
|
|
|
28
28
|
```ts
|
|
29
29
|
// next.config.ts
|
|
@@ -40,7 +40,7 @@ Locales live in your `verbaly.config` (created by `npx verbaly init`), or inline
|
|
|
40
40
|
export default withVerbaly({}, { locales: ['en', 'es', 'pt'] });
|
|
41
41
|
```
|
|
42
42
|
|
|
43
|
-
**2. The provider
|
|
43
|
+
**2. The provider**: root layout, Server Component:
|
|
44
44
|
|
|
45
45
|
```tsx
|
|
46
46
|
// app/layout.tsx
|
|
@@ -60,7 +60,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
|
|
|
60
60
|
}
|
|
61
61
|
```
|
|
62
62
|
|
|
63
|
-
**3. Write text
|
|
63
|
+
**3. Write text**: Server Components use `getT()`:
|
|
64
64
|
|
|
65
65
|
```tsx
|
|
66
66
|
import { getT } from '@verbaly/next/server';
|
|
@@ -83,7 +83,7 @@ export function Counter() {
|
|
|
83
83
|
}
|
|
84
84
|
```
|
|
85
85
|
|
|
86
|
-
**4. Switching languages
|
|
86
|
+
**4. Switching languages**: persists the cookie the server reads and re-renders Server Components:
|
|
87
87
|
|
|
88
88
|
```tsx
|
|
89
89
|
'use client';
|
|
@@ -99,7 +99,7 @@ That's it. `next dev` extracts your messages live (catalogs + `verbaly.d.ts` sta
|
|
|
99
99
|
|
|
100
100
|
## 📖 Options
|
|
101
101
|
|
|
102
|
-
Second argument of `withVerbaly
|
|
102
|
+
Second argument of `withVerbaly`: every [`verbaly.config`](https://www.npmjs.com/package/@verbaly/compiler) option, plus:
|
|
103
103
|
|
|
104
104
|
| Option | What it does |
|
|
105
105
|
| --- | --- |
|
|
@@ -107,7 +107,7 @@ Second argument of `withVerbaly` — every [`verbaly.config`](https://www.npmjs.
|
|
|
107
107
|
| `fallback` | Locale when nothing matches (defaults to the source locale). |
|
|
108
108
|
| `failOnMissing` | `false` opts out of the build gate. |
|
|
109
109
|
|
|
110
|
-
- Negotiation reads `headers()`/`cookies()`, so negotiated routes render dynamically
|
|
110
|
+
- Negotiation reads `headers()`/`cookies()`, so negotiated routes render dynamically; for fully static output use [`verbaly render`](https://www.npmjs.com/package/@verbaly/compiler) per locale.
|
|
111
111
|
- The generated `.verbaly/` directory is build output (it ships its own `.gitignore`).
|
|
112
112
|
|
|
113
113
|
## 📚 Docs
|
package/dist/client.d.ts
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
|
+
import { VerbalyProviderProps as VerbalyProviderProps$1 } from "./server.js";
|
|
1
2
|
import { ReactElement, ReactNode } from "react";
|
|
2
3
|
import { SwitchLocaleOptions } from "verbaly";
|
|
3
4
|
import { Trans, useLocale, useT, useVerbaly } from "@verbaly/react";
|
|
4
5
|
//#region src/client.d.ts
|
|
5
|
-
interface VerbalyProviderProps {
|
|
6
|
-
locale: string;
|
|
7
|
-
messages?: Record<string, string>;
|
|
6
|
+
interface VerbalyProviderProps extends VerbalyProviderProps$1 {
|
|
8
7
|
children?: ReactNode;
|
|
9
8
|
}
|
|
10
9
|
declare function VerbalyProvider(props: VerbalyProviderProps): ReactElement;
|
package/dist/client.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"client.js","names":["ReactVerbalyProvider","useVerbaly"],"sources":["../src/client.ts"],"sourcesContent":["'use client';\n\nimport { useRouter } from 'next/navigation';\nimport {\n createElement,\n useCallback,\n useEffect,\n useState,\n type ReactElement,\n type ReactNode,\n} from 'react';\nimport { VerbalyProvider as ReactVerbalyProvider, useVerbaly } from '@verbaly/react';\nimport { switchLocale, type SwitchLocaleOptions } from 'verbaly';\nimport { createInstance, requestOptions, sourceLocale } from 'virtual:verbaly';\n\nexport { Trans, useLocale, useT, useVerbaly } from '@verbaly/react';\n\nexport interface VerbalyProviderProps {\n
|
|
1
|
+
{"version":3,"file":"client.js","names":["ReactVerbalyProvider","useVerbaly"],"sources":["../src/client.ts"],"sourcesContent":["'use client';\n\nimport { useRouter } from 'next/navigation';\nimport {\n createElement,\n useCallback,\n useEffect,\n useState,\n type ReactElement,\n type ReactNode,\n} from 'react';\nimport { VerbalyProvider as ReactVerbalyProvider, useVerbaly } from '@verbaly/react';\nimport { switchLocale, type SwitchLocaleOptions } from 'verbaly';\nimport { createInstance, requestOptions, sourceLocale } from 'virtual:verbaly';\nimport type { VerbalyProviderProps as SerializableProps } from './server';\n\nexport { Trans, useLocale, useT, useVerbaly } from '@verbaly/react';\n\n// the serializable props getVerbalyProps() produces, plus the client-side children\nexport interface VerbalyProviderProps extends SerializableProps {\n children?: ReactNode;\n}\n\nexport function VerbalyProvider(props: VerbalyProviderProps): ReactElement {\n const [instance] = useState(() => {\n const created = createInstance({ locale: props.locale });\n if (props.messages && props.locale !== sourceLocale) {\n created.addMessages(props.locale, props.messages);\n }\n return created;\n });\n\n // server changed the locale out-of-band (cookie edit + refresh): follow it\n useEffect(() => {\n if (props.locale === instance.locale) return;\n if (props.messages) {\n instance.addMessages(props.locale, props.messages);\n instance.setLocale(props.locale);\n } else {\n void instance.loadLocale(props.locale).then(() => instance.setLocale(props.locale));\n }\n }, [props.locale, props.messages, instance]);\n\n return createElement(ReactVerbalyProvider, { instance }, props.children);\n}\n\n// core switchLocale (catalog → locale → cookie + <html lang>) + RSC re-render\nexport function useSwitchLocale(): (\n locale: string,\n options?: SwitchLocaleOptions,\n) => Promise<void> {\n const instance = useVerbaly();\n const router = useRouter();\n return useCallback(\n async (locale, options) => {\n await switchLocale(instance, locale, { cookie: requestOptions?.cookie, ...options });\n router.refresh();\n },\n [instance, router],\n );\n}\n"],"mappings":";;;;;;;AAuBA,SAAgB,gBAAgB,OAA2C;CACzE,MAAM,CAAC,YAAY,eAAe;EAChC,MAAM,UAAU,eAAe,EAAE,QAAQ,MAAM,OAAO,CAAC;EACvD,IAAI,MAAM,YAAY,MAAM,WAAW,cACrC,QAAQ,YAAY,MAAM,QAAQ,MAAM,QAAQ;EAElD,OAAO;CACT,CAAC;CAGD,gBAAgB;EACd,IAAI,MAAM,WAAW,SAAS,QAAQ;EACtC,IAAI,MAAM,UAAU;GAClB,SAAS,YAAY,MAAM,QAAQ,MAAM,QAAQ;GACjD,SAAS,UAAU,MAAM,MAAM;EACjC,OACE,SAAc,WAAW,MAAM,MAAM,CAAC,CAAC,WAAW,SAAS,UAAU,MAAM,MAAM,CAAC;CAEtF,GAAG;EAAC,MAAM;EAAQ,MAAM;EAAU;CAAQ,CAAC;CAE3C,OAAO,cAAcA,mBAAsB,EAAE,SAAS,GAAG,MAAM,QAAQ;AACzE;AAGA,SAAgB,kBAGG;CACjB,MAAM,WAAWC,aAAW;CAC5B,MAAM,SAAS,UAAU;CACzB,OAAO,YACL,OAAO,QAAQ,YAAY;EACzB,MAAM,aAAa,UAAU,QAAQ;GAAE,QAAQ,gBAAgB;GAAQ,GAAG;EAAQ,CAAC;EACnF,OAAO,QAAQ;CACjB,GACA,CAAC,UAAU,MAAM,CACnB;AACF"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@verbaly/next",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "Next.js integration for Verbaly
|
|
3
|
+
"version": "0.23.0",
|
|
4
|
+
"description": "Next.js integration for Verbaly: App Router/RSC with per-request locale negotiation, Turbopack and webpack support, flash-free hydration.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"i18n",
|
|
7
7
|
"next",
|
|
@@ -64,13 +64,13 @@
|
|
|
64
64
|
"access": "public"
|
|
65
65
|
},
|
|
66
66
|
"dependencies": {
|
|
67
|
-
"@verbaly/compiler": "^0.
|
|
67
|
+
"@verbaly/compiler": "^0.23.0"
|
|
68
68
|
},
|
|
69
69
|
"peerDependencies": {
|
|
70
70
|
"next": "^15.0.0 || ^16.0.0",
|
|
71
71
|
"react": "^18.0.0 || ^19.0.0",
|
|
72
|
-
"@verbaly/react": "^0.
|
|
73
|
-
"verbaly": "^0.
|
|
72
|
+
"@verbaly/react": "^0.23.0",
|
|
73
|
+
"verbaly": "^0.23.0"
|
|
74
74
|
},
|
|
75
75
|
"devDependencies": {
|
|
76
76
|
"@types/react": "^19.2.17",
|
|
@@ -79,8 +79,8 @@
|
|
|
79
79
|
"next": "^16.2.10",
|
|
80
80
|
"react": "^19.2.7",
|
|
81
81
|
"react-dom": "^19.2.7",
|
|
82
|
-
"@verbaly/react": "0.
|
|
83
|
-
"verbaly": "0.
|
|
82
|
+
"@verbaly/react": "0.23.0",
|
|
83
|
+
"verbaly": "0.23.0"
|
|
84
84
|
},
|
|
85
85
|
"scripts": {
|
|
86
86
|
"build": "tsdown",
|