@intlayer/docs 7.0.3 → 7.0.4-canary.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.
Files changed (62) hide show
  1. package/blog/en/intlayer_with_i18next.md +1620 -54
  2. package/blog/en/intlayer_with_next-i18next.md +763 -163
  3. package/blog/en/intlayer_with_next-intl.md +986 -217
  4. package/blog/en/intlayer_with_react-i18next.md +645 -147
  5. package/blog/en/intlayer_with_react-intl.md +900 -147
  6. package/blog/en/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
  7. package/dist/cjs/generated/blog.entry.cjs +13 -1
  8. package/dist/cjs/generated/blog.entry.cjs.map +1 -1
  9. package/dist/cjs/generated/docs.entry.cjs +13 -1
  10. package/dist/cjs/generated/docs.entry.cjs.map +1 -1
  11. package/dist/cjs/generated/frequentQuestions.entry.cjs +13 -1
  12. package/dist/cjs/generated/frequentQuestions.entry.cjs.map +1 -1
  13. package/dist/cjs/generated/legal.entry.cjs +13 -1
  14. package/dist/cjs/generated/legal.entry.cjs.map +1 -1
  15. package/dist/esm/generated/blog.entry.mjs +13 -2
  16. package/dist/esm/generated/blog.entry.mjs.map +1 -1
  17. package/dist/esm/generated/docs.entry.mjs +13 -2
  18. package/dist/esm/generated/docs.entry.mjs.map +1 -1
  19. package/dist/esm/generated/frequentQuestions.entry.mjs +13 -2
  20. package/dist/esm/generated/frequentQuestions.entry.mjs.map +1 -1
  21. package/dist/esm/generated/legal.entry.mjs +13 -2
  22. package/dist/esm/generated/legal.entry.mjs.map +1 -1
  23. package/dist/types/generated/blog.entry.d.ts.map +1 -1
  24. package/dist/types/generated/docs.entry.d.ts.map +1 -1
  25. package/dist/types/generated/frequentQuestions.entry.d.ts.map +1 -1
  26. package/dist/types/generated/legal.entry.d.ts.map +1 -1
  27. package/docs/de/releases/v7.md +1 -18
  28. package/docs/en/CI_CD.md +1 -1
  29. package/docs/en/configuration.md +1 -1
  30. package/docs/en/formatters.md +1 -1
  31. package/docs/en/how_works_intlayer.md +1 -1
  32. package/docs/en/intlayer_CMS.md +1 -1
  33. package/docs/en/intlayer_cli.md +1 -1
  34. package/docs/en/intlayer_with_nextjs_14.md +1 -1
  35. package/docs/en/intlayer_with_nextjs_15.md +1 -1
  36. package/docs/en/intlayer_with_nextjs_16.md +1 -1
  37. package/docs/en/intlayer_with_nextjs_page_router.md +1 -1
  38. package/docs/en/intlayer_with_nuxt.md +1 -1
  39. package/docs/en/intlayer_with_react_native+expo.md +1 -1
  40. package/docs/en/intlayer_with_react_router_v7.md +1 -1
  41. package/docs/en/intlayer_with_tanstack.md +1 -1
  42. package/docs/en/intlayer_with_vite+preact.md +1 -1
  43. package/docs/en/intlayer_with_vite+react.md +1 -1
  44. package/docs/en/intlayer_with_vite+solid.md +1 -1
  45. package/docs/en/intlayer_with_vite+svelte.md +1 -1
  46. package/docs/en/intlayer_with_vite+vue.md +1 -1
  47. package/docs/en/roadmap.md +1 -1
  48. package/docs/es/releases/v7.md +1 -18
  49. package/docs/fr/intlayer_with_nextjs_16.md +2 -51
  50. package/docs/fr/releases/v7.md +1 -18
  51. package/docs/hi/intlayer_with_nextjs_16.md +3 -2
  52. package/docs/id/releases/v7.md +1 -18
  53. package/docs/it/releases/v7.md +1 -18
  54. package/docs/ja/intlayer_with_nextjs_16.md +44 -205
  55. package/docs/ja/releases/v7.md +1 -18
  56. package/docs/ko/releases/v7.md +1 -18
  57. package/docs/pt/intlayer_with_nextjs_16.md +1 -52
  58. package/package.json +14 -14
  59. package/src/generated/blog.entry.ts +26 -3
  60. package/src/generated/docs.entry.ts +26 -3
  61. package/src/generated/frequentQuestions.entry.ts +26 -3
  62. package/src/generated/legal.entry.ts +26 -3
package/docs/fr/releases/v7.md CHANGED
@@ -412,23 +412,6 @@ Le système effectue automatiquement :
412
412
 
413
413
  **Avant (v6) :**
414
414
 
415
- ````typescript
416
- export default {
417
- #### Correspondance de configuration
418
-
419
- | Configuration v6 | Configuration v7 |
420
- | -------------------------- | ---------------------------------------------------- |
421
- | `autoFill: xxx` | `fill: xxx` |
422
- | `prefixDefault: false` | `mode: 'prefix-no-default'` |
423
- | `prefixDefault: true` | `mode: 'prefix-all'` |
424
- | `noPrefix: true` | `mode: 'no-prefix'` |
425
- | `cookieName: 'my-locale'` | `storage: { type: 'cookie', name: 'my-locale' }` |
426
- | `serverSetCookie: 'never'` | `storage: false` ou supprimer le cookie du tableau storage |
427
-
428
- #### Exemple de migration
429
-
430
- **Avant (v6) :**
431
-
432
415
  ```typescript
433
416
  export default {
434
417
  middleware: {
@@ -440,7 +423,7 @@ export default {
440
423
  noPrefix: false,
441
424
  },
442
425
  };
443
- ````
426
+ ```
444
427
 
445
428
  **Après (v7) :**
446
429
 
package/docs/hi/intlayer_with_nextjs_16.md CHANGED
@@ -270,7 +270,7 @@ const LocaleLayout = async ({ children, params: { locale } }) => {
270
270
  export default LocaleLayout;
271
271
  ```
272
272
 
273
- ````jsx fileName="src/app/[locale]/layout.csx" codeFormat="commonjs"
273
+ ```jsx fileName="src/app/[locale]/layout.csx" codeFormat="commonjs"
274
274
  const { Inter } = require("next/font/google");
275
275
  const { getHTMLTextDir } = require("intlayer");
276
276
 
@@ -287,6 +287,7 @@ const LocaleLayout = async ({ children, params: { locale } }) => {
287
287
  };
288
288
 
289
289
  module.exports = LocaleLayout;
290
+ ```
290
291
 
291
292
  > इस चरण में, आपको त्रुटि का सामना करना पड़ेगा: `Error: Missing <html> and <body> tags in the root layout.`। यह अपेक्षित है क्योंकि `/app/page.tsx` फ़ाइल अब उपयोग में नहीं है और इसे हटा दिया जा सकता है। इसके बजाय, `[locale]` पाथ सेगमेंट `/app/[locale]/page.tsx` पेज को सक्रिय करेगा। परिणामस्वरूप, आपके ब्राउज़र में पेज `/en`, `/fr`, `/es` जैसे पाथ के माध्यम से सुलभ होंगे। डिफ़ॉल्ट लोकल को रूट पेज के रूप में सेट करने के लिए, चरण 7 में `proxy` सेटअप को देखें।
292
293
 
@@ -300,7 +301,7 @@ const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {
300
301
  };
301
302
 
302
303
  export default LocaleLayout;
303
- ````
304
+ ```
304
305
 
305
306
  ```jsx {1} fileName="src/app/[locale]/layout.mjx" codeFormat="esm"
306
307
  export { generateStaticParams } from "next-intlayer"; // सम्मिलित करने के लिए पंक्ति
package/docs/id/releases/v7.md CHANGED
@@ -411,23 +411,6 @@ Sistem secara otomatis:
411
411
 
412
412
  **Sebelum (v6):**
413
413
 
414
- ````typescript
415
- export default {
416
- #### Pemetaan konfigurasi
417
-
418
- | Konfigurasi v6 | Konfigurasi v7 |
419
- | ------------------------- | -------------------------------------------------- |
420
- | `autoFill: xxx` | `fill: xxx` |
421
- | `prefixDefault: false` | `mode: 'prefix-no-default'` |
422
- | `prefixDefault: true` | `mode: 'prefix-all'` |
423
- | `noPrefix: true` | `mode: 'no-prefix'` |
424
- | `cookieName: 'my-locale'` | `storage: { type: 'cookie', name: 'my-locale' }` |
425
- | `serverSetCookie: 'never'`| `storage: false` atau hapus cookie dari array storage` |
426
-
427
- #### Contoh migrasi
428
-
429
- **Sebelum (v6):**
430
-
431
414
  ```typescript
432
415
  export default {
433
416
  middleware: {
@@ -439,7 +422,7 @@ export default {
439
422
  noPrefix: false,
440
423
  },
441
424
  };
442
- ````
425
+ ```
443
426
 
444
427
  **Sesudah (v7):**
445
428
 
package/docs/it/releases/v7.md CHANGED
@@ -413,23 +413,6 @@ Il sistema automaticamente:
413
413
 
414
414
  **Prima (v6):**
415
415
 
416
- ````typescript
417
- export default {
418
- #### Mappatura della configurazione
419
-
420
- | Configurazione v6 | Configurazione v7 |
421
- | ------------------------ | --------------------------------------------------- |
422
- | `autoFill: xxx` | `fill: xxx` |
423
- | `prefixDefault: false` | `mode: 'prefix-no-default'` |
424
- | `prefixDefault: true` | `mode: 'prefix-all'` |
425
- | `noPrefix: true` | `mode: 'no-prefix'` |
426
- | `cookieName: 'my-locale'`| `storage: { type: 'cookie', name: 'my-locale' }` |
427
- | `serverSetCookie: 'never'`| `storage: false` o rimuovere il cookie dall'array di storage |
428
-
429
- #### Esempio di migrazione
430
-
431
- **Prima (v6):**
432
-
433
416
  ```typescript
434
417
  export default {
435
418
  middleware: {
@@ -441,7 +424,7 @@ export default {
441
424
  noPrefix: false,
442
425
  },
443
426
  };
444
- ````
427
+ ```
445
428
 
446
429
  **Dopo (v7):**
447
430
 
package/docs/ja/intlayer_with_nextjs_16.md CHANGED
@@ -205,7 +205,7 @@ const RootLayout: FC<PropsWithChildren> = ({ children }) => (
205
205
  export default RootLayout;
206
206
  ```
207
207
 
208
- ```jsx {3} fileName="src/app/layout.mjx" codeFormat="esm"
208
+ ```jsx {3} fileName="src/app/layout.mjs" codeFormat="esm"
209
209
  import "./globals.css";
210
210
 
211
211
  const RootLayout = ({ children }) => (
@@ -216,7 +216,7 @@ const RootLayout = ({ children }) => (
216
216
  export default RootLayout;
217
217
  ```
218
218
 
219
- ```jsx {1,8} fileName="src/app/layout.csx" codeFormat="commonjs"
219
+ ```jsx {1,8} fileName="src/app/layout.cjs" codeFormat="commonjs"
220
220
  require("./globals.css");
221
221
 
222
222
  const RootLayout = ({ children }) => (
@@ -226,26 +226,11 @@ const RootLayout = ({ children }) => (
226
226
 
227
227
  module.exports = {
228
228
  default: RootLayout,
229
- generateStaticParams,
230
229
  };
231
230
  ```
232
231
 
233
232
  > `RootLayout` コンポーネントを空のままにしておくことで、`<html>` タグに [`lang`](https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/lang) および [`dir`](https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/dir) 属性を設定できます。
234
233
 
235
- 動的ルーティングを実装するには、`[locale]` ディレクトリに新しいレイアウトを追加してロケールのパスを提供します。
236
-
237
- ````tsx fileName="src/app/[locale]/layout.tsx" codeFormat="typescript"
238
- import type { NextLayoutIntlayer } from "next-intlayer";
239
- import { Inter } from "next/font/google";
240
- import { getHTMLTextDir } from "intlayer";
241
-
242
- const inter = Inter({ subsets: ["latin"] });
243
-
244
- const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {
245
- const { locale } = await params;
246
- return (
247
- > `RootLayout`コンポーネントを空のままにしておくことで、`<html>`タグに[`lang`](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/lang)および[`dir`](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/dir)属性を設定できます。
248
-
249
234
  動的ルーティングを実装するには、`[locale]`ディレクトリに新しいレイアウトを追加してロケールのパスを指定します：
250
235
 
251
236
  ```tsx fileName="src/app/[locale]/layout.tsx" codeFormat="typescript"
@@ -265,14 +250,15 @@ const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {
265
250
  };
266
251
 
267
252
  export default LocaleLayout;
268
- ````
253
+ ```
269
254
 
270
- ```jsx fileName="src/app/[locale]/layout.mjx" codeFormat="esm"
255
+ ```jsx fileName="src/app/[locale]/layout.mjs" codeFormat="esm"
256
+ import { Inter } from "next/font/google";
271
257
  import { getHTMLTextDir } from "intlayer";
272
258
 
273
259
  const inter = Inter({ subsets: ["latin"] });
274
260
 
275
- const LocaleLayout = async ({ children, params: { locale } }) => {
261
+ const LocaleLayout = async ({ children, params }) => {
276
262
  const { locale } = await params;
277
263
  return (
278
264
  <html lang={locale} dir={getHTMLTextDir(locale)}>
@@ -284,13 +270,13 @@ const LocaleLayout = async ({ children, params: { locale } }) => {
284
270
  export default LocaleLayout;
285
271
  ```
286
272
 
287
- ```jsx fileName="src/app/[locale]/layout.csx" codeFormat="commonjs"
273
+ ```jsx fileName="src/app/[locale]/layout.cjs" codeFormat="commonjs"
288
274
  const { Inter } = require("next/font/google");
289
275
  const { getHTMLTextDir } = require("intlayer");
290
276
 
291
277
  const inter = Inter({ subsets: ["latin"] });
292
278
 
293
- const LocaleLayout = async ({ children, params: { locale } }) => {
279
+ const LocaleLayout = async ({ children, params }) => {
294
280
  const { locale } = await params;
295
281
  return (
296
282
  <html lang={locale} dir={getHTMLTextDir(locale)}>
@@ -304,35 +290,8 @@ module.exports = LocaleLayout;
304
290
 
305
291
  > `[locale]`パスセグメントはロケールを定義するために使用されます。例：`/en-US/about`は`en-US`を指し、`/fr/about`は`fr`を指します。
306
292
 
307
- const inter = Inter({ subsets: ["latin"] });
308
-
309
- const LocaleLayout = async ({ children, params: { locale } }) => {
310
- const { locale } = await params;
311
- return (
312
-
313
- <html lang={locale} dir={getHTMLTextDir(locale)}>
314
- <body className={inter.className}>{children}</body>
315
- </html>
316
- );
317
- };
318
-
319
- module.exports = LocaleLayout;
320
-
321
- ````
322
-
323
293
  > `[locale]` パスセグメントはロケールを定義するために使用されます。例：`/en-US/about` は `en-US` を指し、`/fr/about` は `fr` を指します。
324
294
 
325
- > この段階で、`Error: Missing <html> and <body> tags in the root layout.` というエラーが発生します。これは、`/app/page.tsx` ファイルがもはや使用されておらず、削除可能であるため予期されるものです。代わりに、`[locale]` パスセグメントが `/app/[locale]/page.tsx` ページを有効にします。その結果、ブラウザ上で `/en`、`/fr`、`/es` のようなパスでページにアクセスできるようになります。デフォルトのロケールをルートページとして設定するには、ステップ7の `proxy` 設定を参照してください。
326
-
327
- 次に、アプリケーションのレイアウトで `generateStaticParams` 関数を実装します。
328
-
329
- ```tsx {1} fileName="src/app/[locale]/layout.tsx" codeFormat="typescript"
330
- export { generateStaticParams } from "next-intlayer"; // 挿入する行
331
-
332
- const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {
333
- /*... 残りのコード */
334
- };
335
-
336
295
  > この段階で、`Error: Missing <html> and <body> tags in the root layout.` というエラーが発生します。これは予期されたもので、`/app/page.tsx` ファイルはもはや使用されておらず、削除して問題ありません。代わりに、`[locale]` パスセグメントが `/app/[locale]/page.tsx` ページを有効にします。その結果、ブラウザでは `/en`、`/fr`、`/es` のようなパスでページにアクセスできるようになります。デフォルトのロケールをルートページとして設定するには、ステップ7の `proxy` 設定を参照してください。
337
296
 
338
297
  次に、アプリケーションのレイアウト内で `generateStaticParams` 関数を実装します。
@@ -345,22 +304,22 @@ const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {
345
304
  };
346
305
 
347
306
  export default LocaleLayout;
348
- ````
307
+ ```
349
308
 
350
- ```jsx {1} fileName="src/app/[locale]/layout.mjx" codeFormat="esm"
309
+ ```jsx {1} fileName="src/app/[locale]/layout.mjs" codeFormat="esm"
351
310
  export { generateStaticParams } from "next-intlayer"; // 挿入する行
352
311
 
353
- const LocaleLayout = async ({ children, params: { locale } }) => {
312
+ const LocaleLayout = async ({ children, params }) => {
354
313
  /*... 残りのコード */
355
314
  };
356
315
 
357
- // ... 残りのコード
316
+ export default LocaleLayout;
358
317
  ```
359
318
 
360
- ```jsx {1,7} fileName="src/app/[locale]/layout.csx" codeFormat="commonjs"
319
+ ```jsx {1,7} fileName="src/app/[locale]/layout.cjs" codeFormat="commonjs"
361
320
  const { generateStaticParams } = require("next-intlayer"); // 挿入する行
362
321
 
363
- const LocaleLayout = async ({ children, params: { locale } }) => {
322
+ const LocaleLayout = async ({ children, params }) => {
364
323
  /*... 残りのコード */
365
324
  };
366
325
 
@@ -378,23 +337,6 @@ module.exports = { default: LocaleLayout, generateStaticParams };
378
337
  ```tsx fileName="src/app/[locale]/page.content.ts" contentDeclarationFormat="typescript"
379
338
  import { t, type Dictionary } from "intlayer";
380
339
 
381
- const pageContent = {
382
- key: "page",
383
- content: {
384
- getStarted: {
385
- ```
386
-
387
- > `generateStaticParams` は、すべてのロケールに必要なページを事前にビルドすることを保証し、実行時の計算を減らしてユーザー体験を向上させます。詳細については、[Next.js の generateStaticParams に関するドキュメント](https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic-rendering#generate-static-params)を参照してください。
388
-
389
- > Intlayer は `export const dynamic = 'force-static';` と連携して、すべてのロケールのページが事前にビルドされるようにします。
390
-
391
- ### ステップ5: コンテンツを宣言する
392
-
393
- 翻訳を格納するためのコンテンツ宣言を作成および管理します：
394
-
395
- ```tsx fileName="src/app/[locale]/page.content.ts" contentDeclarationFormat="typescript"
396
- import { t, type Dictionary } from "intlayer";
397
-
398
340
  const pageContent = {
399
341
  key: "page",
400
342
  content: {
@@ -470,25 +412,6 @@ module.exports = pageContent;
470
412
  "pageLink": "src/app/page.tsx"
471
413
  }
472
414
  }
473
- const { t } = require("intlayer");
474
-
475
- /** @type {import('intlayer').Dictionary} */
476
- const pageContent = {
477
- key: "page",
478
- content: {
479
- getStarted: {
480
- main: t({
481
- en: "Get started by editing",
482
- fr: "Commencez par éditer",
483
- es: "Comience por editar",
484
- ja: "編集を始めてください",
485
- }),
486
- pageLink: "src/app/page.tsx",
487
- },
488
- },
489
- };
490
-
491
- module.exports = pageContent;
492
415
  ```
493
416
 
494
417
  ```json fileName="src/app/[locale]/page.content.json" contentDeclarationFormat="json"
@@ -554,7 +477,7 @@ const Page: NextPageIntlayer = async ({ params }) => {
554
477
  export default Page;
555
478
  ```
556
479
 
557
- ```jsx fileName="src/app/[locale]/page.mjx" codeFormat="esm"
480
+ ```jsx fileName="src/app/[locale]/page.mjs" codeFormat="esm"
558
481
  import { ClientComponentExample } from "@components/ClientComponentExample";
559
482
  import { ServerComponentExample } from "@components/ServerComponentExample";
560
483
  import { IntlayerClientProvider } from "next-intlayer";
@@ -589,11 +512,15 @@ const Page = async ({ params }) => {
589
512
  export default Page;
590
513
  ```
591
514
 
592
- ```jsx fileName="src/app/[locale]/page.csx" codeFormat="commonjs"
593
- import { ClientComponentExample } from "@components/ClientComponentExample";
594
- import { ServerComponentExample } from "@components/ServerComponentExample";
595
- import { IntlayerClientProvider } from "next-intlayer";
596
- import { IntlayerServerProvider, useIntlayer } from "next-intlayer/server";
515
+ ```jsx fileName="src/app/[locale]/page.cjs" codeFormat="commonjs"
516
+ const {
517
+ ClientComponentExample,
518
+ } = require("@components/ClientComponentExample");
519
+ const {
520
+ ServerComponentExample,
521
+ } = require("@components/ServerComponentExample");
522
+ const { IntlayerClientProvider } = require("next-intlayer");
523
+ const { IntlayerServerProvider, useIntlayer } = require("next-intlayer/server");
597
524
 
598
525
  const PageContent = () => {
599
526
  const content = useIntlayer("page");
@@ -620,6 +547,8 @@ const Page = async ({ params }) => {
620
547
  </IntlayerServerProvider>
621
548
  );
622
549
  };
550
+
551
+ module.exports = Page;
623
552
  ```
624
553
 
625
554
  - **`IntlayerClientProvider`** はクライアントサイドのコンポーネントにロケールを提供するために使用されます。レイアウトを含む任意の親コンポーネントに配置できます。ただし、Next.jsはページ間でレイアウトコードを共有するため、レイアウトに配置することが推奨されます。レイアウトで `IntlayerClientProvider` を使用することで、各ページごとに再初期化する必要がなくなり、パフォーマンスが向上し、アプリケーション全体で一貫したローカリゼーションコンテキストを維持できます。
@@ -627,21 +556,6 @@ const Page = async ({ params }) => {
627
556
 
628
557
  > レイアウトとページは共通のサーバーコンテキストを共有できません。なぜなら、サーバーコンテキストシステムはリクエストごとのデータストア（[Reactのcache](https://react.dev/reference/react/cache) メカニズム）に基づいており、アプリケーションの異なるセグメントごとに「コンテキスト」が再作成されるためです。プロバイダーを共有レイアウトに配置すると、この分離が破られ、サーバーコンポーネントに正しくサーバーコンテキストの値が伝播されなくなります。
629
558
 
630
- > レイアウトとページは共通のサーバーコンテキストを共有できません。なぜなら、サーバーコンテキストシステムはリクエストごとのデータストア（[Reactのキャッシュ](https://react.dev/reference/react/cache)メカニズム）に基づいているため、アプリケーションの異なるセグメントごとに各「コンテキスト」が再作成されるからです。プロバイダーを共有レイアウトに配置すると、この分離が破られ、サーバーコンポーネントへのサーバーコンテキスト値の正しい伝播が妨げられます。
631
-
632
- ````tsx {4,7} fileName="src/components/ClientComponentExample.tsx" codeFormat="typescript"
633
- "use client";
634
-
635
- import type { FC } from "react";
636
- import { useIntlayer } from "next-intlayer";
637
-
638
- export const ClientComponentExample: FC = () => {
639
- const content = useIntlayer("client-component-example"); // 関連するコンテンツ宣言を作成
640
-
641
- return (
642
- <div>
643
- > レイアウトとページは共通のサーバーコンテキストを共有できません。なぜなら、サーバーコンテキストシステムはリクエストごとのデータストア（[Reactのcache](https://react.dev/reference/react/cache)メカニズム）に基づいており、アプリケーションの異なるセグメントごとに各「コンテキスト」が再作成されるためです。プロバイダーを共有レイアウトに配置すると、この分離が破壊され、サーバーコンポーネントへのサーバーコンテキスト値の正しい伝播が妨げられます。
644
-
645
559
  ```tsx {4,7} fileName="src/components/ClientComponentExample.tsx" codeFormat="typescript"
646
560
  "use client";
647
561
 
@@ -658,9 +572,9 @@ export const ClientComponentExample: FC = () => {
658
572
  </div>
659
573
  );
660
574
  };
661
- ````
575
+ ```
662
576
 
663
- ```jsx {3,6} fileName="src/components/ClientComponentExample.mjx" codeFormat="esm"
577
+ ```jsx {3,6} fileName="src/components/ClientComponentExample.mjs" codeFormat="esm"
664
578
  "use client";
665
579
 
666
580
  import { useIntlayer } from "next-intlayer";
@@ -677,7 +591,7 @@ const ClientComponentExample = () => {
677
591
  };
678
592
  ```
679
593
 
680
- ```jsx {3,6} fileName="src/components/ClientComponentExample.csx" codeFormat="commonjs"
594
+ ```jsx {3,6} fileName="src/components/ClientComponentExample.cjs" codeFormat="commonjs"
681
595
  "use client";
682
596
 
683
597
  const { useIntlayer } = require("next-intlayer");
@@ -692,6 +606,8 @@ const ClientComponentExample = () => {
692
606
  </div>
693
607
  );
694
608
  };
609
+
610
+ module.exports = ClientComponentExample;
695
611
  ```
696
612
 
697
613
  ```tsx {2} fileName="src/components/ServerComponentExample.tsx" codeFormat="typescript"
@@ -710,27 +626,12 @@ export const ServerComponentExample: FC = () => {
710
626
  };
711
627
  ```
712
628
 
713
- ```jsx {1} fileName="src/components/ServerComponentExample.mjx" codeFormat="esm"
629
+ ```jsx {1} fileName="src/components/ServerComponentExample.mjs" codeFormat="esm"
714
630
  import { useIntlayer } from "next-intlayer/server";
715
631
 
716
632
  const ServerComponentExample = () => {
717
633
  const content = useIntlayer("server-component-example"); // 関連するコンテンツ宣言を作成
718
634
 
719
- return (
720
- <h2>{content.title}</h2>
721
- <p>{content.content}</p>
722
- </div>
723
- );
724
- };
725
- ```
726
-
727
- ```tsx {2} fileName="src/components/ServerComponentExample.tsx" codeFormat="typescript"
728
- import type { FC } from "react";
729
- import { useIntlayer } from "next-intlayer/server";
730
-
731
- export const ServerComponentExample: FC = () => {
732
- const content = useIntlayer("server-component-example"); // 関連コンテンツ宣言を作成
733
-
734
635
  return (
735
636
  <div>
736
637
  <h2>{content.title}</h2>
@@ -738,24 +639,11 @@ export const ServerComponentExample: FC = () => {
738
639
  </div>
739
640
  );
740
641
  };
741
- ```
742
642
 
743
- ```jsx {1} fileName="src/components/ServerComponentExample.mjx" codeFormat="esm"
744
- import { useIntlayer } from "next-intlayer/server";
745
-
746
- const ServerComponentExample = () => {
747
- const content = useIntlayer("server-component-example"); // 関連コンテンツ宣言を作成
748
-
749
- return (
750
- <div>
751
- <h2>{content.title}</h2>
752
- <p>{content.content}</p>
753
- </div>
754
- );
755
- };
643
+ export default ServerComponentExample;
756
644
  ```
757
645
 
758
- ```jsx {1} fileName="src/components/ServerComponentExample.csx" codeFormat="commonjs"
646
+ ```jsx {1} fileName="src/components/ServerComponentExample.cjs" codeFormat="commonjs"
759
647
  const { useIntlayer } = require("next-intlayer/server");
760
648
 
761
649
  const ServerComponentExample = () => {
@@ -768,6 +656,8 @@ const ServerComponentExample = () => {
768
656
  </div>
769
657
  );
770
658
  };
659
+
660
+ module.exports = ServerComponentExample;
771
661
  ```
772
662
 
773
663
  > コンテンツを `alt`、`title`、`href`、`aria-label` などの `string` 属性で使用したい場合は、関数の値を呼び出す必要があります。例えば：
@@ -896,36 +786,6 @@ const metadataContent = {
896
786
  },
897
787
  };
898
788
 
899
- module.exports = metadataContent;
900
- fr: "Généré par create next app",
901
- es: "Generado por create next app",
902
- }),
903
- },
904
- };
905
-
906
- export default metadataContent;
907
- ```
908
-
909
- ```javascript fileName="src/app/[locale]/metadata.content.cjs" contentDeclarationFormat="commonjs"
910
- const { t } = require("intlayer");
911
-
912
- /** @type {import('intlayer').Dictionary<import('next').Metadata>} */
913
- const metadataContent = {
914
- key: "page-metadata",
915
- content: {
916
- title: t({
917
- en: "Create Next App",
918
- fr: "Créer une application Next.js",
919
- es: "Crear una aplicación Next.js",
920
- }),
921
- description: t({
922
- en: "Generated by create next app",
923
- fr: "Généré par create next app",
924
- es: "Generado por create next app",
925
- }),
926
- },
927
- };
928
-
929
789
  module.exports = metadataContent;
930
790
  ```
931
791
 
@@ -1089,26 +949,6 @@ module.exports = { generateMetadata };
1089
949
 
1090
950
  代わりに、`getTranslation` 関数を使用してメタデータを宣言することもできます。ただし、メタデータの翻訳を自動化し、コンテンツを外部化するためには、コンテンツ宣言ファイルを使用することが推奨されます。
1091
951
 
1092
- ````typescript fileName="src/app/[locale]/layout.tsx or src/app/[locale]/page.tsx" codeFormat="typescript"
1093
- import {
1094
- type IConfigLocales,
1095
- getTranslation,
1096
- getMultilingualUrls,
1097
- } from "intlayer";
1098
- import type { Metadata } from "next";
1099
- import type { LocalPromiseParams } from "next-intlayer";
1100
-
1101
- export const generateMetadata = async ({
1102
- params,
1103
- }: LocalPromiseParams): Promise<Metadata> => {
1104
- const { locale } = await params;
1105
- const t = <T>(content: IConfigLocales<T>) => getTranslation(content, locale);
1106
-
1107
- return {
1108
- title: t<string>({
1109
- en: "My title",
1110
- 代わりに、`getTranslation` 関数を使用してメタデータを宣言することもできます。ただし、メタデータの翻訳を自動化し、コンテンツを外部化するためには、コンテンツ宣言ファイルを使用することを推奨します。
1111
-
1112
952
  ```typescript fileName="src/app/[locale]/layout.tsx or src/app/[locale]/page.tsx" codeFormat="typescript"
1113
953
  import {
1114
954
  type IConfigLocales,
@@ -1139,7 +979,7 @@ export const generateMetadata = async ({
1139
979
  };
1140
980
 
1141
981
  // ... 残りのコード
1142
- ````
982
+ ```
1143
983
 
1144
984
  ```javascript fileName="src/app/[locale]/layout.mjs or src/app/[locale]/page.mjs" codeFormat="esm"
1145
985
  import { getTranslation, getMultilingualUrls } from "intlayer";
@@ -1226,7 +1066,7 @@ const sitemap = (): MetadataRoute.Sitemap => [
1226
1066
  export default sitemap;
1227
1067
  ```
1228
1068
 
1229
- ```jsx fileName="src/app/sitemap.mjx" codeFormat="esm"
1069
+ ```jsx fileName="src/app/sitemap.mjs" codeFormat="esm"
1230
1070
  import { getMultilingualUrls } from "intlayer";
1231
1071
 
1232
1072
  const sitemap = () => [
@@ -1253,7 +1093,7 @@ const sitemap = () => [
1253
1093
  export default sitemap;
1254
1094
  ```
1255
1095
 
1256
- ```jsx fileName="src/app/sitemap.csx" codeFormat="commonjs"
1096
+ ```jsx fileName="src/app/sitemap.cjs" codeFormat="commonjs"
1257
1097
  const { getMultilingualUrls } = require("intlayer");
1258
1098
 
1259
1099
  const sitemap = () => [
@@ -1301,7 +1141,7 @@ const robots = (): MetadataRoute.Robots => ({
1301
1141
  export default robots;
1302
1142
  ```
1303
1143
 
1304
- ```jsx fileName="src/app/robots.mjx" codeFormat="esm"
1144
+ ```jsx fileName="src/app/robots.mjs" codeFormat="esm"
1305
1145
  import { getMultilingualUrls } from "intlayer";
1306
1146
 
1307
1147
  const getAllMultilingualUrls = (urls) =>
@@ -1320,7 +1160,7 @@ const robots = () => ({
1320
1160
  export default robots;
1321
1161
  ```
1322
1162
 
1323
- ```jsx fileName="src/app/robots.csx" codeFormat="commonjs"
1163
+ ```jsx fileName="src/app/robots.cjs" codeFormat="commonjs"
1324
1164
  const { getMultilingualUrls } = require("intlayer");
1325
1165
 
1326
1166
  // すべての多言語URLを取得する関数
@@ -1399,7 +1239,7 @@ export const LocaleSwitcher: FC = () => {
1399
1239
  };
1400
1240
  ```
1401
1241
 
1402
- ```jsx fileName="src/components/LocaleSwitcher.msx" codeFormat="esm"
1242
+ ```jsx fileName="src/components/LocaleSwitcher.mjs" codeFormat="esm"
1403
1243
  "use client";
1404
1244
 
1405
1245
  import {
@@ -1451,7 +1291,7 @@ export const LocaleSwitcher = () => {
1451
1291
  };
1452
1292
  ```
1453
1293
 
1454
- ```jsx fileName="src/components/LocaleSwitcher.csx" codeFormat="commonjs"
1294
+ ```jsx fileName="src/components/LocaleSwitcher.cjs" codeFormat="commonjs"
1455
1295
  "use client";
1456
1296
 
1457
1297
  const {
@@ -1463,7 +1303,7 @@ const {
1463
1303
  const { useLocale } = require("next-intlayer");
1464
1304
  const Link = require("next/link");
1465
1305
 
1466
- export const LocaleSwitcher = () => {
1306
+ const LocaleSwitcher = () => {
1467
1307
  const { locale, pathWithoutLocale, availableLocales, setLocale } =
1468
1308
  useLocale();
1469
1309
 
@@ -1661,7 +1501,6 @@ const Link = ({ href, children, ...props }) => {
1661
1501
 
1662
1502
  #### 動作の仕組み
1663
1503
 
1664
- - **外部リンクの検出**:
1665
1504
  - **外部リンクの検出**:
1666
1505
  ヘルパー関数 `checkIsExternalLink` は、URLが外部リンクかどうかを判定します。外部リンクはローカライズの必要がないため、そのまま変更されません。
1667
1506
 
package/docs/ja/releases/v7.md CHANGED
@@ -412,23 +412,6 @@ const content = {
412
412
 
413
413
  **以前 (v6):**
414
414
 
415
- ````typescript
416
- export default {
417
- #### 設定マッピング
418
-
419
- | v6 設定 | v7 設定 |
420
- | -------------------------- | ---------------------------------------------------- |
421
- | `autoFill: xxx` | `fill: xxx` |
422
- | `prefixDefault: false` | `mode: 'prefix-no-default'` |
423
- | `prefixDefault: true` | `mode: 'prefix-all'` |
424
- | `noPrefix: true` | `mode: 'no-prefix'` |
425
- | `cookieName: 'my-locale'` | `storage: { type: 'cookie', name: 'my-locale' }` |
426
- | `serverSetCookie: 'never'` | `storage: false` または storage 配列から cookie を削除 |
427
-
428
- #### マイグレーション例
429
-
430
- **以前 (v6):**
431
-
432
415
  ```typescript
433
416
  export default {
434
417
  middleware: {
@@ -440,7 +423,7 @@ export default {
440
423
  noPrefix: false,
441
424
  },
442
425
  };
443
- ````
426
+ ```
444
427
 
445
428
  **以降 (v7):**
446
429
 
package/docs/ko/releases/v7.md CHANGED
@@ -412,23 +412,6 @@ const content = {
412
412
 
413
413
  **이전 (v6):**
414
414
 
415
- ````typescript
416
- export default {
417
- #### 구성 매핑
418
-
419
- | v6 구성 | v7 구성 |
420
- | -------------------------- | ---------------------------------------------------- |
421
- | `autoFill: xxx` | `fill: xxx` |
422
- | `prefixDefault: false` | `mode: 'prefix-no-default'` |
423
- | `prefixDefault: true` | `mode: 'prefix-all'` |
424
- | `noPrefix: true` | `mode: 'no-prefix'` |
425
- | `cookieName: 'my-locale'` | `storage: { type: 'cookie', name: 'my-locale' }` |
426
- | `serverSetCookie: 'never'` | `storage: false` 또는 저장소 배열에서 쿠키 제거 |
427
-
428
- #### 마이그레이션 예시
429
-
430
- **이전 (v6):**
431
-
432
415
  ```typescript
433
416
  export default {
434
417
  middleware: {
@@ -440,7 +423,7 @@ export default {
440
423
  noPrefix: false,
441
424
  },
442
425
  };
443
- ````
426
+ ```
444
427
 
445
428
  **이후 (v7):**
446
429