next-intlayer 3.5.11 → 4.0.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.
- package/README.md +91 -291
- package/dist/cjs/server/withIntlayer.cjs.map +1 -1
- package/dist/esm/server/withIntlayer.mjs.map +1 -1
- package/package.json +17 -17
package/README.md
CHANGED
|
@@ -17,369 +17,169 @@
|
|
|
17
17
|
</a>
|
|
18
18
|
</div>
|
|
19
19
|
|
|
20
|
-
#
|
|
20
|
+
# next-intlayer: NPM Package to internationalize (i18n) an Next.js application
|
|
21
21
|
|
|
22
|
-
**Intlayer** is
|
|
22
|
+
**Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like React, Next.js, and Express.js.
|
|
23
23
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
```bash
|
|
27
|
-
.
|
|
28
|
-
├── ClientComponent
|
|
29
|
-
│ ├── index.content.ts
|
|
30
|
-
│ └── index.tsx
|
|
31
|
-
└── ServerComponent
|
|
32
|
-
├── index.content.ts
|
|
33
|
-
└── index.tsx
|
|
34
|
-
```
|
|
24
|
+
**The `next-intlayer` package** allows you to internationalize your Next.js application. It provides context providers and hooks for Next.js internationalization. Additionally, it includes the Next.js plugin for integrating Intlayer with [Webpack](https://webpack.js.org/) or [Turbopack](https://nextjs.org/docs/app/api-reference/turbopack), as well as middleware for detecting the user's preferred locale, managing cookies, and handling URL redirection.
|
|
35
25
|
|
|
36
|
-
|
|
37
|
-
// ./ClientComponent/index.content.ts
|
|
26
|
+
## Why Internationalize Your Next.js Application?
|
|
38
27
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
const clientComponentContent = {
|
|
42
|
-
key: "client-component",
|
|
43
|
-
content: {
|
|
44
|
-
myTranslatedContent: t({
|
|
45
|
-
en: "Hello World",
|
|
46
|
-
fr: "Bonjour le monde",
|
|
47
|
-
es: "Hola Mundo",
|
|
48
|
-
}),
|
|
49
|
-
},
|
|
50
|
-
} satisfies DeclarationContent;
|
|
51
|
-
|
|
52
|
-
export default clientComponentContent;
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
```tsx
|
|
56
|
-
// ./ClientComponent/index.tsx
|
|
57
|
-
"use client";
|
|
58
|
-
|
|
59
|
-
import { useIntlayer } from "next-intlayer";
|
|
60
|
-
|
|
61
|
-
export const ClientComponent = () => {
|
|
62
|
-
const { myTranslatedContent } = useIntlayer("client-component");
|
|
63
|
-
|
|
64
|
-
return <span>{myTranslatedContent}</span>;
|
|
65
|
-
};
|
|
66
|
-
```
|
|
28
|
+
Internationalizing your Next.js application is essential for serving a global audience effectively. It allows your application to deliver content and messages in the preferred language of each user. This capability enhances user experience and broadens your application's reach by making it more accessible and relevant to people from different linguistic backgrounds.
|
|
67
29
|
|
|
68
|
-
## Why
|
|
30
|
+
## Why to integrate Intlayer?
|
|
69
31
|
|
|
70
32
|
- **JavaScript-Powered Content Management**: Harness the flexibility of JavaScript to define and manage your content efficiently.
|
|
71
33
|
- **Type-Safe Environment**: Leverage TypeScript to ensure all your content definitions are precise and error-free.
|
|
72
34
|
- **Integrated Content Files**: Keep your translations close to their respective components, enhancing maintainability and clarity.
|
|
73
|
-
- **Simplified Setup**: Get up and running quickly with minimal configuration, especially optimized for Next.js projects.
|
|
74
|
-
- **Server Component Support**: Perfectly suited for Next.js server components, ensuring smooth server-side rendering.
|
|
75
|
-
- **Enhanced Routing**: Full support for Next.js app routing, adapting seamlessly to complex application structures.
|
|
76
35
|
|
|
77
|
-
|
|
36
|
+
## Installation
|
|
78
37
|
|
|
79
|
-
|
|
38
|
+
Install the necessary package using your preferred package manager:
|
|
80
39
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
Install the necessary packages using npm:
|
|
84
|
-
|
|
85
|
-
```bash
|
|
86
|
-
npm install intlayer next-intlayer
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
```bash
|
|
90
|
-
yarn add intlayer next-intlayer
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
```bash
|
|
94
|
-
pnpm add intlayer next-intlayer
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
## Step 2: Configure Your Project
|
|
98
|
-
|
|
99
|
-
Create a config file to configure the languages of your application:
|
|
100
|
-
|
|
101
|
-
```typescript
|
|
102
|
-
// intlayer.config.ts
|
|
103
|
-
|
|
104
|
-
import { Locales, type IntlayerConfig } from "intlayer";
|
|
105
|
-
|
|
106
|
-
const config: IntlayerConfig = {
|
|
107
|
-
internationalization: {
|
|
108
|
-
locales: [
|
|
109
|
-
Locales.ENGLISH,
|
|
110
|
-
Locales.FRENCH,
|
|
111
|
-
Locales.SPANISH,
|
|
112
|
-
// Your other locales
|
|
113
|
-
],
|
|
114
|
-
defaultLocale: Locales.ENGLISH,
|
|
115
|
-
},
|
|
116
|
-
};
|
|
117
|
-
|
|
118
|
-
export default config;
|
|
40
|
+
```bash packageManager="npm"
|
|
41
|
+
npm install next-intlayer
|
|
119
42
|
```
|
|
120
43
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
## Step 3: Integrate Intlayer in Your Next.js Configuration
|
|
124
|
-
|
|
125
|
-
Configure your Next.js setup to use Intlayer:
|
|
126
|
-
|
|
127
|
-
```typescript
|
|
128
|
-
// next.config.mjs
|
|
129
|
-
import { withIntlayer } from "next-intlayer/server";
|
|
130
|
-
|
|
131
|
-
/** @type {import('next').NextConfig} */
|
|
132
|
-
const nextConfig = {};
|
|
133
|
-
|
|
134
|
-
export default withIntlayer(nextConfig);
|
|
44
|
+
```bash packageManager="yarn"
|
|
45
|
+
yarn add next-intlayer
|
|
135
46
|
```
|
|
136
47
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
Set up middleware to detect the user's preferred locale:
|
|
140
|
-
|
|
141
|
-
```typescript
|
|
142
|
-
// src/middleware.ts
|
|
143
|
-
export { intlayerMiddleware as middleware } from "next-intlayer/middleware";
|
|
144
|
-
|
|
145
|
-
export const config = {
|
|
146
|
-
matcher: "/((?!api|static|.*\\..*|_next).*)",
|
|
147
|
-
};
|
|
48
|
+
```bash packageManager="pnpm"
|
|
49
|
+
pnpm add next-intlayer
|
|
148
50
|
```
|
|
149
51
|
|
|
150
|
-
##
|
|
151
|
-
|
|
152
|
-
Implement dynamic routing for localized content:
|
|
153
|
-
|
|
154
|
-
Change `src/app/page.ts` to `src/app/[locale]/page.ts`
|
|
155
|
-
|
|
156
|
-
Then, implement the generateStaticParams function in your application Layout.
|
|
157
|
-
|
|
158
|
-
```tsx
|
|
159
|
-
// src/app/layout.tsx
|
|
52
|
+
## Example of usage
|
|
160
53
|
|
|
161
|
-
|
|
162
|
-
import "./globals.css";
|
|
54
|
+
With Intlayer, you can declare your content in a structured way anywhere in your codebase.
|
|
163
55
|
|
|
164
|
-
|
|
56
|
+
By default, Intlayer scans for files with the extension `.content.{ts,tsx,js,jsx,mjs,cjs}`.
|
|
165
57
|
|
|
166
|
-
|
|
167
|
-
children,
|
|
168
|
-
}: Readonly<{
|
|
169
|
-
children: ReactNode;
|
|
170
|
-
}>) => children;
|
|
58
|
+
> You can modify the default extension by setting the `contentDir` property in the [configuration file](https://github.com/aymericzip/intlayer/blob/main/docs/en/configuration.md).
|
|
171
59
|
|
|
172
|
-
|
|
60
|
+
```bash codeFormat="typescript"
|
|
61
|
+
.
|
|
62
|
+
├── intlayer.config.ts
|
|
63
|
+
└── src
|
|
64
|
+
└── components
|
|
65
|
+
├── ClientComponent
|
|
66
|
+
│ ├── index.content.ts
|
|
67
|
+
│ └── index.tsx
|
|
68
|
+
└── ServerComponent
|
|
69
|
+
├── index.content.ts
|
|
70
|
+
└── index.tsx
|
|
173
71
|
```
|
|
174
72
|
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
```tsx
|
|
178
|
-
// src/app/[locale]/layout.tsx
|
|
179
|
-
|
|
180
|
-
import { type NextLayoutIntlayer } from "next-intlayer";
|
|
181
|
-
import { Inter } from "next/font/google";
|
|
182
|
-
import { getHTMLTextDir } from "intlayer";
|
|
183
|
-
|
|
184
|
-
const inter = Inter({ subsets: ["latin"] });
|
|
73
|
+
### Declare your content
|
|
185
74
|
|
|
186
|
-
|
|
187
|
-
const { locale } = await params;
|
|
188
|
-
return (
|
|
189
|
-
<html lang={locale} dir={getHTMLTextDir(locale)}>
|
|
190
|
-
<body className={inter.className}>{children}</body>
|
|
191
|
-
</html>
|
|
192
|
-
);
|
|
193
|
-
};
|
|
75
|
+
`next-intlayer` is made to work with the [`intlayer` package](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/intlayer/index.md).`intlayer` is a package that allows you to declare your content anywhere in your code. It converts multilingual content declarations into structured dictionaries that integrate seamlessly into your application.
|
|
194
76
|
|
|
195
|
-
|
|
196
|
-
```
|
|
77
|
+
Here’s an example of content declaration:
|
|
197
78
|
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
Create and manage your content dictionaries:
|
|
201
|
-
|
|
202
|
-
```tsx
|
|
203
|
-
// src/app/[locale]/page.content.ts
|
|
204
|
-
import { t, type DeclarationContent } from "intlayer";
|
|
79
|
+
```tsx filePath="src/ClientComponent/index.content.ts" codeFormat="typescript"
|
|
80
|
+
import { type DeclarationContent, t } from "intlayer";
|
|
205
81
|
|
|
206
|
-
const
|
|
207
|
-
key: "
|
|
82
|
+
const clientComponentContent = {
|
|
83
|
+
key: "client-component",
|
|
208
84
|
content: {
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
85
|
+
myTranslatedContent: t({
|
|
86
|
+
en: "Hello World",
|
|
87
|
+
fr: "Bonjour le monde",
|
|
88
|
+
es: "Hola Mundo",
|
|
89
|
+
}),
|
|
90
|
+
numberOfCar: enu({
|
|
91
|
+
"<-1": "Less than minus one car",
|
|
92
|
+
"-1": "Minus one car",
|
|
93
|
+
"0": "No cars",
|
|
94
|
+
"1": "One car",
|
|
95
|
+
">5": "Some cars",
|
|
96
|
+
">19": "Many cars",
|
|
97
|
+
}),
|
|
217
98
|
},
|
|
218
99
|
} satisfies DeclarationContent;
|
|
219
100
|
|
|
220
|
-
export default
|
|
101
|
+
export default clientComponentContent;
|
|
221
102
|
```
|
|
222
103
|
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
## Step 7: Utilize Content in Your Code
|
|
104
|
+
### Utilize Content in Your Code
|
|
226
105
|
|
|
227
|
-
|
|
106
|
+
Once you have declared your content, you can use it in your code. Here's an example of how to use the content in a React component:
|
|
228
107
|
|
|
229
|
-
```tsx
|
|
230
|
-
|
|
108
|
+
```tsx {4,7} fileName="src/components/ClientComponentExample.tsx" codeFormat="typescript"
|
|
109
|
+
"use client";
|
|
231
110
|
|
|
232
|
-
import {
|
|
233
|
-
import {
|
|
234
|
-
import { NestedServerComponentExample } from "@components/NestedServerComponentExample";
|
|
235
|
-
import { ServerComponentExample } from "@components/ServerComponentExample";
|
|
236
|
-
import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";
|
|
237
|
-
import { IntlayerServerProvider, useIntlayer } from "next-intlayer/server";
|
|
111
|
+
import type { FC } from "react";
|
|
112
|
+
import { useIntlayer } from "next-intlayer";
|
|
238
113
|
|
|
239
|
-
const
|
|
240
|
-
const {
|
|
241
|
-
return (
|
|
242
|
-
const content = useIntlayer("page", locale);
|
|
114
|
+
export const ClientComponentExample: FC = () => {
|
|
115
|
+
const { myTranslatedContent } = useIntlayer("client-component"); // Create related content declaration
|
|
243
116
|
|
|
244
117
|
return (
|
|
245
|
-
|
|
246
|
-
<p>
|
|
247
|
-
|
|
248
|
-
<code>{content.getStarted.pageLink}</code>
|
|
249
|
-
</p>
|
|
250
|
-
{/**
|
|
251
|
-
* IntlayerServerProvider is used to provide the locale to the server children
|
|
252
|
-
* Don't work if set in the layout
|
|
253
|
-
*/}
|
|
254
|
-
<IntlayerServerProvider locale={locale}>
|
|
255
|
-
<ServerComponentExample />
|
|
256
|
-
</IntlayerServerProvider>
|
|
257
|
-
{/**
|
|
258
|
-
* IntlayerClientProvider is used to provide the locale to the client children
|
|
259
|
-
* Can be set in any parent component, including the layout
|
|
260
|
-
*/}
|
|
261
|
-
<IntlayerClientProvider locale={locale}>
|
|
262
|
-
<ClientComponentExample />
|
|
263
|
-
</IntlayerClientProvider>
|
|
264
|
-
</>
|
|
118
|
+
<div>
|
|
119
|
+
<p>{myTranslatedContent}</p>
|
|
120
|
+
</div>
|
|
265
121
|
);
|
|
266
122
|
};
|
|
267
|
-
|
|
268
|
-
export default Page;
|
|
269
123
|
```
|
|
270
124
|
|
|
271
|
-
```
|
|
272
|
-
// src/components/ClientComponentExample.tsx
|
|
273
|
-
|
|
125
|
+
```jsx {3,6} fileName="src/components/ClientComponentExample.mjx" codeFormat="esm"
|
|
274
126
|
"use client";
|
|
275
127
|
|
|
276
128
|
import { useIntlayer } from "next-intlayer";
|
|
277
129
|
|
|
278
|
-
|
|
279
|
-
const
|
|
130
|
+
const ClientComponentExample = () => {
|
|
131
|
+
const { myTranslatedContent } = useIntlayer("client-component"); // Create related content declaration
|
|
280
132
|
|
|
281
133
|
return (
|
|
282
134
|
<div>
|
|
283
|
-
<
|
|
284
|
-
<p>{content.content}</p>
|
|
135
|
+
<p>{myTranslatedContent}</p>
|
|
285
136
|
</div>
|
|
286
137
|
);
|
|
287
138
|
};
|
|
288
139
|
```
|
|
289
140
|
|
|
290
|
-
```
|
|
291
|
-
|
|
141
|
+
```jsx {3,6} fileName="src/components/ClientComponentExample.csx" codeFormat="commonjs"
|
|
142
|
+
"use client";
|
|
292
143
|
|
|
293
|
-
|
|
144
|
+
const { useIntlayer } = require("next-intlayer");
|
|
294
145
|
|
|
295
|
-
|
|
296
|
-
const
|
|
146
|
+
const ClientComponentExample = () => {
|
|
147
|
+
const { myTranslatedContent } = useIntlayer("client-component"); // Create related content declaration
|
|
297
148
|
|
|
298
149
|
return (
|
|
299
150
|
<div>
|
|
300
|
-
<
|
|
301
|
-
<p>{content.content}</p>
|
|
151
|
+
<p>{myTranslatedContent}</p>
|
|
302
152
|
</div>
|
|
303
153
|
);
|
|
304
154
|
};
|
|
305
155
|
```
|
|
306
156
|
|
|
307
|
-
|
|
308
|
-
>
|
|
309
|
-
> ```tsx
|
|
310
|
-
> <img src={content.image.src.value} alt={content.image.value} />
|
|
311
|
-
> ```
|
|
312
|
-
|
|
313
|
-
## (Optional) Step 8: Internationalization of your metadata
|
|
314
|
-
|
|
315
|
-
In the case you want to internationalize your metadata, such as the title of your page, you can use the `generateMetadata` function provided by NextJS. Inside the function use the `getTranslationContent` function to translate your metadata.
|
|
316
|
-
|
|
317
|
-
```typescript
|
|
318
|
-
// src/app/[locale]/metadata.ts
|
|
319
|
-
|
|
320
|
-
import { type IConfigLocales, getTranslationContent } from 'intlayer';
|
|
321
|
-
import type { Metadata } from 'next';
|
|
322
|
-
import type { LocalParams } from 'next-intlayer';
|
|
323
|
-
|
|
324
|
-
export const generateMetadata = async ({
|
|
325
|
-
params,
|
|
326
|
-
}: LocalPromiseParams): Promise<Metadata> => {
|
|
327
|
-
const { locale } = await params;
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
const t = <T>(content: IConfigLocales<T>) =>
|
|
331
|
-
getTranslationContent(content, locale);
|
|
332
|
-
|
|
333
|
-
return {
|
|
334
|
-
title: t<string>({
|
|
335
|
-
en: 'My title',
|
|
336
|
-
fr: 'Mon titre',
|
|
337
|
-
es: 'Mi título',
|
|
338
|
-
}),
|
|
339
|
-
description: t({
|
|
340
|
-
en: 'My description',
|
|
341
|
-
fr: 'Ma description',
|
|
342
|
-
es: 'Mi descripción',
|
|
343
|
-
}),
|
|
344
|
-
|
|
345
|
-
};
|
|
346
|
-
```
|
|
347
|
-
|
|
348
|
-
## (Optional) Step 9: Change the language of your content
|
|
157
|
+
## Mastering the internationalization of your Next.js application
|
|
349
158
|
|
|
350
|
-
|
|
159
|
+
Intlayer provides a lot of features to help you internationalize your Next.js application. Here are some of the key features:
|
|
351
160
|
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
161
|
+
- **Internationalization of server components**: Intlayer allows you to internationalize your server components in the same way as your client components. This means that you can use the same content declarations for both client and server components.
|
|
162
|
+
- **Middleware for Locale Detection**: Intlayer provides middleware to detect the user's preferred locale. This middleware is used to detect the user's preferred locale and redirect them to the appropriate URL as specified in the [configuration](https://github.com/aymericzip/intlayer/blob/main/docs/en/configuration.md).
|
|
163
|
+
- **Internationalization of metadata**: Intlayer provides a way to internationalize your metadata, such as the title of your page, using the `generateMetadata` function provided by Next.js. You can use the `getTranslationContent` function to translate your metadata.
|
|
164
|
+
- **Internationalization of sitemap.xml and robots.txt**: Intlayer allows you to internationalize your sitemap.xml and robots.txt files. You can use the `getMultilingualUrls` function to generate multilingual URLs for your sitemap.
|
|
165
|
+
- **Internationalization of URLs**: Intlayer allows you to internationalize your URLs by using the `getMultilingualUrls` function. This function generates multilingual URLs for your sitemap.
|
|
355
166
|
|
|
356
|
-
|
|
357
|
-
const { setLocale } = useLocale();
|
|
167
|
+
**To learn more about these features, refer to the [Next.js Internationalization (i18n) with Intlayer and Next.js 15 App Router](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_nextjs_15.md) guide.**
|
|
358
168
|
|
|
359
|
-
|
|
360
|
-
<button onClick={() => setLocale(Locales.English)}>Change Language</button>
|
|
361
|
-
);
|
|
362
|
-
};
|
|
363
|
-
```
|
|
169
|
+
## Functions provided by `next-intlayer` package
|
|
364
170
|
|
|
365
|
-
|
|
171
|
+
The `next-intlayer` package also provides some functions to help you to internationalize your application.
|
|
366
172
|
|
|
367
|
-
|
|
173
|
+
- [`t()`](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/next-intlayer/t.md)
|
|
174
|
+
- [`useIntlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/next-intlayer/useIntlayer.md)
|
|
175
|
+
- [`useDictionary()`](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/next-intlayer/useDictionary.md)
|
|
176
|
+
- [`useLocale()`](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/next-intlayer/useLocale.md)
|
|
177
|
+
- [`useIntlayerAsync()`](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/next-intlayer/useIntlayerAsync.md)
|
|
368
178
|
|
|
369
|
-
|
|
179
|
+
## Read about Intlayer
|
|
370
180
|
|
|
371
|
-
|
|
181
|
+
- [Intlayer Website](https://intlayer.org)
|
|
182
|
+
- [Intlayer Documentation](https://intlayer.org/docs)
|
|
183
|
+
- [Intlayer GitHub](https://github.com/aymericzip/intlayer)
|
|
372
184
|
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
```json5
|
|
376
|
-
// tsconfig.json
|
|
377
|
-
|
|
378
|
-
{
|
|
379
|
-
// your custom config
|
|
380
|
-
"include": [
|
|
381
|
-
"src",
|
|
382
|
-
"types", // <- Include the auto generated types
|
|
383
|
-
],
|
|
384
|
-
}
|
|
385
|
-
```
|
|
185
|
+
- [Ask your questions to our smart documentation](https://intlayer.org/docs/chat)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/server/withIntlayer.ts"],"sourcesContent":["import { resolve, relative, join } from 'path';\nimport { getConfiguration, formatEnvVariable } from '@intlayer/config';\nimport { IntLayerPlugin } from '@intlayer/webpack';\nimport type { NextConfig } from 'next';\nimport type { NextJsWebpackConfig } from 'next/dist/server/config-shared';\n\ntype WebpackParams = Parameters<NextJsWebpackConfig>;\n\n/**\n * A Next.js plugin that adds the intlayer configuration to the webpack configuration\n * and sets the environment variables\n *\n * Usage:\n *\n * ```ts\n * // next.config.js\n * export default withIntlayer(nextConfig)\n * ```\n *\n */\nexport const withIntlayer = (\n nextConfig: Partial<NextConfig> = {}\n): Partial<NextConfig> => {\n if (typeof nextConfig !== 'object') nextConfig = {};\n\n const intlayerConfig = getConfiguration();\n\n //
|
|
1
|
+
{"version":3,"sources":["../../../src/server/withIntlayer.ts"],"sourcesContent":["import { resolve, relative, join } from 'path';\nimport { getConfiguration, formatEnvVariable } from '@intlayer/config';\nimport { IntLayerPlugin } from '@intlayer/webpack';\nimport type { NextConfig } from 'next';\nimport type { NextJsWebpackConfig } from 'next/dist/server/config-shared';\n\ntype WebpackParams = Parameters<NextJsWebpackConfig>;\n\n/**\n * A Next.js plugin that adds the intlayer configuration to the webpack configuration\n * and sets the environment variables\n *\n * Usage:\n *\n * ```ts\n * // next.config.js\n * export default withIntlayer(nextConfig)\n * ```\n *\n */\nexport const withIntlayer = (\n nextConfig: Partial<NextConfig> = {}\n): Partial<NextConfig> => {\n if (typeof nextConfig !== 'object') nextConfig = {};\n\n const intlayerConfig = getConfiguration();\n\n // Format all configuration values as environment variables\n const env = formatEnvVariable('next');\n\n const { mainDir, baseDir } = intlayerConfig.content;\n const dictionariesPath = join(mainDir, 'dictionaries.mjs');\n const relativeDictionariesPath = relative(baseDir, dictionariesPath);\n\n return Object.assign({}, nextConfig, {\n env: { ...nextConfig.env, ...env },\n\n serverExternalPackages: [\n ...(nextConfig.serverExternalPackages ?? []),\n 'esbuild',\n 'module',\n 'fs',\n 'chokidar',\n 'fsevents',\n ],\n\n experimental: {\n ...(nextConfig.experimental ?? {}),\n // Using Intlayer with Turbopack is not supported as long external modules can't be resolved (such as esbuild or fs)\n turbo: {\n ...(nextConfig.experimental?.turbo ?? {}),\n resolveAlias: {\n ...(nextConfig.experimental?.turbo?.resolveAlias ?? {}),\n '@intlayer/dictionaries-entry': resolve(relativeDictionariesPath),\n },\n\n rules: {\n '*.node': {\n as: '*.node',\n loaders: ['node-loader'],\n },\n },\n },\n },\n\n webpack: (config: WebpackParams['0'], options: WebpackParams[1]) => {\n if (nextConfig.webpack) {\n // Invoke the existing webpack config if it exists\n config = nextConfig.webpack(config, options);\n }\n\n config.resolve.alias['@intlayer/dictionaries-entry'] = resolve(\n relativeDictionariesPath\n );\n\n config.externals.push({\n esbuild: 'esbuild',\n module: 'module',\n fs: 'fs',\n chokidar: 'chokidar',\n fsevents: 'fsevents',\n });\n config.module.rules.push({\n test: /\\.node$/,\n loader: 'node-loader',\n });\n\n const { isServer, nextRuntime } = options;\n\n // Apply IntLayerPlugin only on the server-side\n if (isServer && nextRuntime === 'nodejs') {\n config.plugins.push(new IntLayerPlugin());\n }\n\n return config;\n },\n } satisfies Partial<NextConfig>);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAwC;AACxC,oBAAoD;AACpD,qBAA+B;AAkBxB,MAAM,eAAe,CAC1B,aAAkC,CAAC,MACX;AACxB,MAAI,OAAO,eAAe,SAAU,cAAa,CAAC;AAElD,QAAM,qBAAiB,gCAAiB;AAGxC,QAAM,UAAM,iCAAkB,MAAM;AAEpC,QAAM,EAAE,SAAS,QAAQ,IAAI,eAAe;AAC5C,QAAM,uBAAmB,kBAAK,SAAS,kBAAkB;AACzD,QAAM,+BAA2B,sBAAS,SAAS,gBAAgB;AAEnE,SAAO,OAAO,OAAO,CAAC,GAAG,YAAY;AAAA,IACnC,KAAK,EAAE,GAAG,WAAW,KAAK,GAAG,IAAI;AAAA,IAEjC,wBAAwB;AAAA,MACtB,GAAI,WAAW,0BAA0B,CAAC;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IAEA,cAAc;AAAA,MACZ,GAAI,WAAW,gBAAgB,CAAC;AAAA;AAAA,MAEhC,OAAO;AAAA,QACL,GAAI,WAAW,cAAc,SAAS,CAAC;AAAA,QACvC,cAAc;AAAA,UACZ,GAAI,WAAW,cAAc,OAAO,gBAAgB,CAAC;AAAA,UACrD,oCAAgC,qBAAQ,wBAAwB;AAAA,QAClE;AAAA,QAEA,OAAO;AAAA,UACL,UAAU;AAAA,YACR,IAAI;AAAA,YACJ,SAAS,CAAC,aAAa;AAAA,UACzB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IAEA,SAAS,CAAC,QAA4B,YAA8B;AAClE,UAAI,WAAW,SAAS;AAEtB,iBAAS,WAAW,QAAQ,QAAQ,OAAO;AAAA,MAC7C;AAEA,aAAO,QAAQ,MAAM,8BAA8B,QAAI;AAAA,QACrD;AAAA,MACF;AAEA,aAAO,UAAU,KAAK;AAAA,QACpB,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,UAAU;AAAA,MACZ,CAAC;AACD,aAAO,OAAO,MAAM,KAAK;AAAA,QACvB,MAAM;AAAA,QACN,QAAQ;AAAA,MACV,CAAC;AAED,YAAM,EAAE,UAAU,YAAY,IAAI;AAGlC,UAAI,YAAY,gBAAgB,UAAU;AACxC,eAAO,QAAQ,KAAK,IAAI,8BAAe,CAAC;AAAA,MAC1C;AAEA,aAAO;AAAA,IACT;AAAA,EACF,CAA+B;AACjC;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/server/withIntlayer.ts"],"sourcesContent":["import { resolve, relative, join } from 'path';\nimport { getConfiguration, formatEnvVariable } from '@intlayer/config';\nimport { IntLayerPlugin } from '@intlayer/webpack';\nimport type { NextConfig } from 'next';\nimport type { NextJsWebpackConfig } from 'next/dist/server/config-shared';\n\ntype WebpackParams = Parameters<NextJsWebpackConfig>;\n\n/**\n * A Next.js plugin that adds the intlayer configuration to the webpack configuration\n * and sets the environment variables\n *\n * Usage:\n *\n * ```ts\n * // next.config.js\n * export default withIntlayer(nextConfig)\n * ```\n *\n */\nexport const withIntlayer = (\n nextConfig: Partial<NextConfig> = {}\n): Partial<NextConfig> => {\n if (typeof nextConfig !== 'object') nextConfig = {};\n\n const intlayerConfig = getConfiguration();\n\n //
|
|
1
|
+
{"version":3,"sources":["../../../src/server/withIntlayer.ts"],"sourcesContent":["import { resolve, relative, join } from 'path';\nimport { getConfiguration, formatEnvVariable } from '@intlayer/config';\nimport { IntLayerPlugin } from '@intlayer/webpack';\nimport type { NextConfig } from 'next';\nimport type { NextJsWebpackConfig } from 'next/dist/server/config-shared';\n\ntype WebpackParams = Parameters<NextJsWebpackConfig>;\n\n/**\n * A Next.js plugin that adds the intlayer configuration to the webpack configuration\n * and sets the environment variables\n *\n * Usage:\n *\n * ```ts\n * // next.config.js\n * export default withIntlayer(nextConfig)\n * ```\n *\n */\nexport const withIntlayer = (\n nextConfig: Partial<NextConfig> = {}\n): Partial<NextConfig> => {\n if (typeof nextConfig !== 'object') nextConfig = {};\n\n const intlayerConfig = getConfiguration();\n\n // Format all configuration values as environment variables\n const env = formatEnvVariable('next');\n\n const { mainDir, baseDir } = intlayerConfig.content;\n const dictionariesPath = join(mainDir, 'dictionaries.mjs');\n const relativeDictionariesPath = relative(baseDir, dictionariesPath);\n\n return Object.assign({}, nextConfig, {\n env: { ...nextConfig.env, ...env },\n\n serverExternalPackages: [\n ...(nextConfig.serverExternalPackages ?? []),\n 'esbuild',\n 'module',\n 'fs',\n 'chokidar',\n 'fsevents',\n ],\n\n experimental: {\n ...(nextConfig.experimental ?? {}),\n // Using Intlayer with Turbopack is not supported as long external modules can't be resolved (such as esbuild or fs)\n turbo: {\n ...(nextConfig.experimental?.turbo ?? {}),\n resolveAlias: {\n ...(nextConfig.experimental?.turbo?.resolveAlias ?? {}),\n '@intlayer/dictionaries-entry': resolve(relativeDictionariesPath),\n },\n\n rules: {\n '*.node': {\n as: '*.node',\n loaders: ['node-loader'],\n },\n },\n },\n },\n\n webpack: (config: WebpackParams['0'], options: WebpackParams[1]) => {\n if (nextConfig.webpack) {\n // Invoke the existing webpack config if it exists\n config = nextConfig.webpack(config, options);\n }\n\n config.resolve.alias['@intlayer/dictionaries-entry'] = resolve(\n relativeDictionariesPath\n );\n\n config.externals.push({\n esbuild: 'esbuild',\n module: 'module',\n fs: 'fs',\n chokidar: 'chokidar',\n fsevents: 'fsevents',\n });\n config.module.rules.push({\n test: /\\.node$/,\n loader: 'node-loader',\n });\n\n const { isServer, nextRuntime } = options;\n\n // Apply IntLayerPlugin only on the server-side\n if (isServer && nextRuntime === 'nodejs') {\n config.plugins.push(new IntLayerPlugin());\n }\n\n return config;\n },\n } satisfies Partial<NextConfig>);\n};\n"],"mappings":"AAAA,SAAS,SAAS,UAAU,YAAY;AACxC,SAAS,kBAAkB,yBAAyB;AACpD,SAAS,sBAAsB;AAkBxB,MAAM,eAAe,CAC1B,aAAkC,CAAC,MACX;AACxB,MAAI,OAAO,eAAe,SAAU,cAAa,CAAC;AAElD,QAAM,iBAAiB,iBAAiB;AAGxC,QAAM,MAAM,kBAAkB,MAAM;AAEpC,QAAM,EAAE,SAAS,QAAQ,IAAI,eAAe;AAC5C,QAAM,mBAAmB,KAAK,SAAS,kBAAkB;AACzD,QAAM,2BAA2B,SAAS,SAAS,gBAAgB;AAEnE,SAAO,OAAO,OAAO,CAAC,GAAG,YAAY;AAAA,IACnC,KAAK,EAAE,GAAG,WAAW,KAAK,GAAG,IAAI;AAAA,IAEjC,wBAAwB;AAAA,MACtB,GAAI,WAAW,0BAA0B,CAAC;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IAEA,cAAc;AAAA,MACZ,GAAI,WAAW,gBAAgB,CAAC;AAAA;AAAA,MAEhC,OAAO;AAAA,QACL,GAAI,WAAW,cAAc,SAAS,CAAC;AAAA,QACvC,cAAc;AAAA,UACZ,GAAI,WAAW,cAAc,OAAO,gBAAgB,CAAC;AAAA,UACrD,gCAAgC,QAAQ,wBAAwB;AAAA,QAClE;AAAA,QAEA,OAAO;AAAA,UACL,UAAU;AAAA,YACR,IAAI;AAAA,YACJ,SAAS,CAAC,aAAa;AAAA,UACzB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IAEA,SAAS,CAAC,QAA4B,YAA8B;AAClE,UAAI,WAAW,SAAS;AAEtB,iBAAS,WAAW,QAAQ,QAAQ,OAAO;AAAA,MAC7C;AAEA,aAAO,QAAQ,MAAM,8BAA8B,IAAI;AAAA,QACrD;AAAA,MACF;AAEA,aAAO,UAAU,KAAK;AAAA,QACpB,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,UAAU;AAAA,MACZ,CAAC;AACD,aAAO,OAAO,MAAM,KAAK;AAAA,QACvB,MAAM;AAAA,QACN,QAAQ;AAAA,MACV,CAAC;AAED,YAAM,EAAE,UAAU,YAAY,IAAI;AAGlC,UAAI,YAAY,gBAAgB,UAAU;AACxC,eAAO,QAAQ,KAAK,IAAI,eAAe,CAAC;AAAA,MAC1C;AAEA,aAAO;AAAA,IACT;AAAA,EACF,CAA+B;AACjC;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "next-intlayer",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.2",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Internationalisation tool for Next.js applications. Declare your multilingual contant in the same lever than your component. Powered by TypeScript, declaration files.",
|
|
6
6
|
"keywords": [
|
|
@@ -72,12 +72,12 @@
|
|
|
72
72
|
],
|
|
73
73
|
"dependencies": {
|
|
74
74
|
"node-loader": "^2.1.0",
|
|
75
|
-
"@intlayer/
|
|
76
|
-
"@intlayer/
|
|
77
|
-
"
|
|
78
|
-
"@intlayer/dictionaries-entry": "
|
|
79
|
-
"@intlayer/
|
|
80
|
-
"
|
|
75
|
+
"@intlayer/config": "4.0.2",
|
|
76
|
+
"@intlayer/core": "4.0.2",
|
|
77
|
+
"react-intlayer": "4.0.2",
|
|
78
|
+
"@intlayer/dictionaries-entry": "4.0.2",
|
|
79
|
+
"@intlayer/chokidar": "4.0.2",
|
|
80
|
+
"@intlayer/webpack": "4.0.2"
|
|
81
81
|
},
|
|
82
82
|
"devDependencies": {
|
|
83
83
|
"@types/node": "^22.10.6",
|
|
@@ -90,21 +90,21 @@
|
|
|
90
90
|
"tsc-alias": "^1.8.10",
|
|
91
91
|
"tsup": "^8.3.5",
|
|
92
92
|
"typescript": "^5.7.3",
|
|
93
|
-
"@utils/
|
|
93
|
+
"@utils/ts-config": "1.0.4",
|
|
94
|
+
"intlayer": "4.0.2",
|
|
94
95
|
"@utils/ts-config-types": "1.0.4",
|
|
95
|
-
"
|
|
96
|
-
"@utils/tsup-config": "1.0.4"
|
|
97
|
-
"@utils/ts-config": "1.0.4"
|
|
96
|
+
"@utils/eslint-config": "1.0.4",
|
|
97
|
+
"@utils/tsup-config": "1.0.4"
|
|
98
98
|
},
|
|
99
99
|
"peerDependencies": {
|
|
100
100
|
"next": ">=14.0.0",
|
|
101
101
|
"react": ">=16.0.0",
|
|
102
|
-
"@intlayer/config": "
|
|
103
|
-
"@intlayer/
|
|
104
|
-
"intlayer": "
|
|
105
|
-
"@intlayer/
|
|
106
|
-
"
|
|
107
|
-
"
|
|
102
|
+
"@intlayer/config": "4.0.2",
|
|
103
|
+
"@intlayer/core": "4.0.2",
|
|
104
|
+
"@intlayer/dictionaries-entry": "4.0.2",
|
|
105
|
+
"@intlayer/webpack": "4.0.2",
|
|
106
|
+
"intlayer": "4.0.2",
|
|
107
|
+
"react-intlayer": "^4.0.2"
|
|
108
108
|
},
|
|
109
109
|
"engines": {
|
|
110
110
|
"node": ">=14.18"
|