npm - @intlayer/docs - Versions diffs - 8.6.10 → 8.7.0-canary.1 - Mend

@intlayer/docs 8.6.10 → 8.7.0-canary.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.

Files changed (129) hide show

package/blog/ar/i18n_using_next-i18next.md +1 -1
package/blog/ar/next-i18next_vs_next-intl_vs_intlayer.md +2 -2
package/blog/de/i18n_using_next-i18next.md +1 -1
package/blog/de/next-i18next_vs_next-intl_vs_intlayer.md +2 -2
package/blog/en/i18n_using_next-i18next.md +1 -1
package/blog/en/next-i18next_vs_next-intl_vs_intlayer.md +2 -2
package/blog/en-GB/i18n_using_next-i18next.md +1 -1
package/blog/en-GB/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
package/blog/es/i18n_using_next-i18next.md +1 -1
package/blog/es/next-i18next_vs_next-intl_vs_intlayer.md +2 -2
package/blog/fr/i18n_using_next-i18next.md +1 -1
package/blog/fr/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
package/blog/hi/i18n_using_next-i18next.md +1 -1
package/blog/id/i18n_using_next-i18next.md +1 -1
package/blog/id/next-i18next_vs_next-intl_vs_intlayer.md +2 -2
package/blog/it/i18n_using_next-i18next.md +1 -1
package/blog/it/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
package/blog/ja/i18n_using_next-i18next.md +1 -1
package/blog/ja/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
package/blog/ko/i18n_using_next-i18next.md +1 -1
package/blog/ko/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
package/blog/pl/i18n_using_next-i18next.md +1 -1
package/blog/pl/next-i18next_vs_next-intl_vs_intlayer.md +2 -2
package/blog/pt/i18n_using_next-i18next.md +1 -1
package/blog/pt/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
package/blog/ru/i18n_using_next-i18next.md +1 -1
package/blog/ru/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
package/blog/tr/i18n_using_next-i18next.md +1 -1
package/blog/uk/i18n_using_next-i18next.md +1 -1
package/blog/uk/next-i18next_vs_next-intl_vs_intlayer.md +2 -2
package/blog/vi/i18n_using_next-i18next.md +1 -1
package/blog/vi/next-i18next_vs_next-intl_vs_intlayer.md +2 -2
package/blog/zh/i18n_using_next-i18next.md +1 -1
package/blog/zh/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
package/docs/ar/bundle_optimization.md +454 -0
package/docs/ar/intlayer_with_next-i18next.md +1 -1
package/docs/ar/intlayer_with_next-intl.md +1 -1
package/docs/ar/intlayer_with_tanstack+solid.md +24 -5
package/docs/ar/intlayer_with_tanstack.md +45 -68
package/docs/bn/bundle_optimization.md +454 -0
package/docs/cs/bundle_optimization.md +454 -0
package/docs/de/bundle_optimization.md +454 -0
package/docs/de/intlayer_with_next-i18next.md +1 -1
package/docs/de/intlayer_with_next-intl.md +1 -1
package/docs/de/intlayer_with_tanstack+solid.md +24 -5
package/docs/de/intlayer_with_tanstack.md +45 -68
package/docs/en/bundle_optimization.md +36 -8
package/docs/en/intlayer_with_next-i18next.md +1 -1
package/docs/en/intlayer_with_next-intl.md +1 -1
package/docs/en/intlayer_with_tanstack+solid.md +24 -5
package/docs/en/intlayer_with_tanstack.md +45 -68
package/docs/en-GB/bundle_optimization.md +454 -0
package/docs/en-GB/intlayer_with_next-i18next.md +1 -1
package/docs/en-GB/intlayer_with_next-intl.md +1 -1
package/docs/en-GB/intlayer_with_tanstack+solid.md +24 -5
package/docs/en-GB/intlayer_with_tanstack.md +47 -70
package/docs/es/bundle_optimization.md +454 -0
package/docs/es/intlayer_with_next-i18next.md +1 -1
package/docs/es/intlayer_with_next-intl.md +1 -1
package/docs/es/intlayer_with_tanstack+solid.md +24 -5
package/docs/es/intlayer_with_tanstack.md +45 -68
package/docs/fr/bundle_optimization.md +454 -0
package/docs/fr/intlayer_with_next-i18next.md +1 -1
package/docs/fr/intlayer_with_next-intl.md +1 -1
package/docs/fr/intlayer_with_tanstack+solid.md +24 -5
package/docs/fr/intlayer_with_tanstack.md +45 -68
package/docs/hi/bundle_optimization.md +454 -0
package/docs/hi/intlayer_with_next-i18next.md +1 -1
package/docs/hi/intlayer_with_next-intl.md +1 -1
package/docs/hi/intlayer_with_tanstack+solid.md +24 -5
package/docs/hi/intlayer_with_tanstack.md +45 -68
package/docs/id/bundle_optimization.md +454 -0
package/docs/id/intlayer_with_next-i18next.md +1 -1
package/docs/id/intlayer_with_next-intl.md +1 -1
package/docs/id/intlayer_with_tanstack+solid.md +24 -5
package/docs/id/intlayer_with_tanstack.md +45 -68
package/docs/it/bundle_optimization.md +454 -0
package/docs/it/intlayer_with_next-i18next.md +1 -1
package/docs/it/intlayer_with_next-intl.md +1 -1
package/docs/it/intlayer_with_tanstack+solid.md +24 -5
package/docs/it/intlayer_with_tanstack.md +45 -68
package/docs/ja/bundle_optimization.md +454 -0
package/docs/ja/intlayer_with_next-i18next.md +1 -1
package/docs/ja/intlayer_with_next-intl.md +1 -1
package/docs/ja/intlayer_with_tanstack+solid.md +24 -5
package/docs/ja/intlayer_with_tanstack.md +45 -36
package/docs/ko/bundle_optimization.md +454 -0
package/docs/ko/intlayer_with_next-i18next.md +1 -1
package/docs/ko/intlayer_with_next-intl.md +1 -1
package/docs/ko/intlayer_with_tanstack+solid.md +24 -5
package/docs/ko/intlayer_with_tanstack.md +45 -68
package/docs/nl/bundle_optimization.md +454 -0
package/docs/pl/bundle_optimization.md +454 -0
package/docs/pl/intlayer_with_next-i18next.md +1 -1
package/docs/pl/intlayer_with_next-intl.md +1 -1
package/docs/pl/intlayer_with_tanstack+solid.md +24 -5
package/docs/pl/intlayer_with_tanstack.md +45 -68
package/docs/pt/bundle_optimization.md +454 -0
package/docs/pt/intlayer_with_next-i18next.md +1 -1
package/docs/pt/intlayer_with_next-intl.md +1 -1
package/docs/pt/intlayer_with_tanstack+solid.md +24 -5
package/docs/pt/intlayer_with_tanstack.md +45 -68
package/docs/ru/bundle_optimization.md +454 -0
package/docs/ru/intlayer_with_next-i18next.md +1 -1
package/docs/ru/intlayer_with_next-intl.md +1 -1
package/docs/ru/intlayer_with_tanstack+solid.md +24 -5
package/docs/ru/intlayer_with_tanstack.md +45 -68
package/docs/tr/bundle_optimization.md +454 -0
package/docs/tr/intlayer_with_next-i18next.md +1 -1
package/docs/tr/intlayer_with_next-intl.md +1 -1
package/docs/tr/intlayer_with_tanstack+solid.md +24 -5
package/docs/tr/intlayer_with_tanstack.md +45 -68
package/docs/uk/bundle_optimization.md +454 -0
package/docs/uk/intlayer_with_next-i18next.md +1 -1
package/docs/uk/intlayer_with_next-intl.md +1 -1
package/docs/uk/intlayer_with_tanstack+solid.md +24 -5
package/docs/uk/intlayer_with_tanstack.md +45 -68
package/docs/ur/bundle_optimization.md +454 -0
package/docs/vi/bundle_optimization.md +454 -0
package/docs/vi/intlayer_with_next-i18next.md +1 -1
package/docs/vi/intlayer_with_next-intl.md +1 -1
package/docs/vi/intlayer_with_tanstack+solid.md +24 -5
package/docs/vi/intlayer_with_tanstack.md +45 -68
package/docs/zh/bundle_optimization.md +454 -0
package/docs/zh/intlayer_with_next-i18next.md +1 -1
package/docs/zh/intlayer_with_next-intl.md +1 -1
package/docs/zh/intlayer_with_tanstack+solid.md +24 -5
package/docs/zh/intlayer_with_tanstack.md +45 -68
package/package.json +7 -7

package/docs/it/intlayer_with_tanstack.md CHANGED Viewed

@@ -225,9 +225,7 @@ function RootDocument({ children }: { children: ReactNode }) {
         <HeadContent />
       </head>
       <body>
-        <IntlayerProvider locale={locale}>
-          {children}
-        </IntlayerProvider>
+        <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
         <Scripts />
       </body>
     </html>
@@ -326,30 +324,20 @@ import { getPrefix } from "intlayer";
 export const LOCALE_ROUTE = "{-$locale}" as const;
-// Utilità principale
-export type RemoveLocaleParam<T> = T extends string
-  ? RemoveLocaleFromString<T>
-  : T;
+export type To = StripLocalePrefix<LinkComponentProps["to"]>;
-export type To = RemoveLocaleParam<LinkComponentProps["to"]>;
-type CollapseDoubleSlashes<S extends string> =
-  S extends `${infer H}//${infer T}` ? CollapseDoubleSlashes<`${H}/${T}`> : S;
+export type StripLocalePrefix<T extends string | undefined> = T extends
+  | `/${typeof LOCALE_ROUTE}/`
+  | `/${typeof LOCALE_ROUTE}`
+  ? "/"
+  : T extends `/${typeof LOCALE_ROUTE}/${infer Rest}`
+    ? `/${Rest}`
+    : T;
 type LocalizedLinkProps = {
   to?: To;
 } & Omit<LinkComponentProps, "to">;
-// Helper
-type RemoveAll<
-  S extends string,
-  Sub extends string,
-> = S extends `${infer H}${Sub}${infer T}` ? RemoveAll<`${H}${T}`, Sub> : S;
-type RemoveLocaleFromString<S extends string> = CollapseDoubleSlashes<
-  RemoveAll<S, typeof LOCALE_ROUTE>
->;
 export const LocalizedLink: FC<LocalizedLinkProps> = (props) => {
   const { locale } = useLocale();
   const { localePrefix } = getPrefix(locale);
@@ -378,26 +366,26 @@ Quindi possiamo creare un hook `useLocalizedNavigate` per la navigazione program
 import { useNavigate } from "@tanstack/react-router";
 import { getPrefix } from "intlayer";
 import { useLocale } from "react-intlayer";
-import { LOCALE_ROUTE } from "@/components/localized-link";
+import type { StripLocalePrefix } from "@/components/localized-link";
 import type { FileRouteTypes } from "@/routeTree.gen";
-type StripLocalePrefix<T extends string> = T extends
-  | `/${typeof LOCALE_ROUTE}`
-  | `/${typeof LOCALE_ROUTE}/`
-  ? "/"
-  : T extends `/${typeof LOCALE_ROUTE}/${infer Rest}`
-    ? `/${Rest}`
-    : never;
+type NavigateFn = ReturnType<typeof useNavigate>;
+type BaseNavigateOptions = Parameters<NavigateFn>[0];
 type LocalizedTo = StripLocalePrefix<FileRouteTypes["to"]>;
-type LocalizedNavigate = {
-  (to: LocalizedTo): ReturnType<ReturnType<typeof useNavigate>>;
-  (
-    opts: { to: LocalizedTo } & Record<string, unknown>
-  ): ReturnType<ReturnType<typeof useNavigate>>;
+export type LocalizedNavigateOptions = Omit<
+  BaseNavigateOptions,
+  "to" | "params"
+> & {
+  to: LocalizedTo;
+  params?: Omit<NonNullable<BaseNavigateOptions["params"]>, "locale">;
 };
+type LocalizedNavigate = (
+  options: LocalizedNavigateOptions
+) => ReturnType<NavigateFn>;
 export const useLocalizedNavigate = () => {
   const navigate = useNavigate();
@@ -444,38 +432,6 @@ import { useLocalizedNavigate } from "@/hooks/useLocalizedNavigate";
 export const Route = createFileRoute("/{-$locale}/")({
   component: RouteComponent,
-  head: ({ params }) => {
-    const { locale } = params;
-    const path = "/"; // The path for this route
-    const metaContent = getIntlayer("app", locale);
-    return {
-      links: [
-        // Canonical link: Points to the current localized page
-        { rel: "canonical", href: getLocalizedUrl(path, locale) },
-        // Hreflang: Tell Google about all localized versions
-        ...localeMap(({ locale: mapLocale }) => ({
-          rel: "alternate",
-          hrefLang: mapLocale,
-          href: getLocalizedUrl(path, mapLocale),
-        })),
-        // x-default: For users in unmatched languages
-        // Define the default fallback locale (usually your primary language)
-        {
-          rel: "alternate",
-          hrefLang: "x-default",
-          href: getLocalizedUrl(path, defaultLocale),
-        },
-      ],
-      meta: [
-        { title: metaContent.title },
-        { name: "description", content: metaContent.meta.description },
-      ],
-    };
-  },
 });
 function RouteComponent() {
@@ -630,12 +586,33 @@ export const Route = createFileRoute("/{-$locale}/")({
   component: RouteComponent,
   head: ({ params }) => {
     const { locale } = params;
-    const metaContent = getIntlayer("page-metadata", locale);
+    const path = "/"; // The path for this route
+    const metaContent = getIntlayer("app", locale);
     return {
+      links: [
+        // Canonical link: Points to the current localized page
+        { rel: "canonical", href: getLocalizedUrl(path, locale) },
+        // Hreflang: Tell Google about all localized versions
+        ...localeMap(({ locale: mapLocale }) => ({
+          rel: "alternate",
+          hrefLang: mapLocale,
+          href: getLocalizedUrl(path, mapLocale),
+        })),
+        // x-default: For users in unmatched languages
+        // Define the default fallback locale (usually your primary language)
+        {
+          rel: "alternate",
+          hrefLang: "x-default",
+          href: getLocalizedUrl(path, defaultLocale),
+        },
+      ],
       meta: [
         { title: metaContent.title },
-        { content: metaContent.description, name: "description" },
+        { name: "description", content: metaContent.meta.description },
       ],
     };
   },

package/docs/ja/bundle_optimization.md ADDED Viewed

@@ -0,0 +1,454 @@
+---
+createdAt: 2025-11-25
+updatedAt: 2026-04-08
+title: i18nバンドルサイズの最適化とパフォーマンス
+description: 国際化（i18n）コンテンツを最適化することで、アプリケーションのバンドルサイズを削減します。Intlayerを使用して辞書のツリーシェイキングや遅延読み込みを活用する方法を学びましょう。
+keywords:
+  - バンドル最適化
+  - コンテンツ自動化
+  - 動的コンテンツ
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - bundle-optimization
+history:
+  - version: 8.7.0
+    date: 2026-04-08
+    changes: "ビルド構成に `minify` と `purge` オプションを追加"
+---
+# i18nバンドルサイズの最適化とパフォーマンス
+JSONファイルに依存する従来のi18nソリューションで最も一般的な課題の1つは、コンテンツサイズの管理です。開発者が手動でコンテンツを名前空間に分離しない場合、ユーザーは特定のページを表示するためだけに、全ページおよび全言語の翻訳をダウンロードすることになりかねません。
+例えば、10ページが10言語に翻訳されたアプリケーションでは、ユーザーが必要なのは**1ページ**（現在の言語の現在のページ）だけであるにもかかわらず、100ページ分のコンテンツをダウンロードすることになる可能性があります。これは帯域幅の無駄遣いと読み込み時間の低下につながります。
+**Intlayerは、ビルド時の最適化を通じてこの問題を解決します。** コードを分析してコンポーネントごとに実際に使用されている辞書を検出し、必要なコンテンツのみをバンドルに再注入します。
+## 目次
+<TOC />
+## バンドルのスキャン
+バンドルを分析することは、「重い」JSONファイルやコード分割の機会を特定するための第一歩です。これらのツールは、アプリケーションのコンパイル済みコードの視覚的なツリーマップを生成し、どのライブラリが最もスペースを消費しているかを正確に把握できるようにします。
+<Tabs>
+ <Tab value="vite">
+### Vite / Rollup
+Viteは内部でRollupを使用しています。`rollup-plugin-visualizer`プラグインは、グラフ内のすべてのモジュールのサイズを示すインタラクティブなHTMLファイルを生成します。
+```bash
+npm install -D rollup-plugin-visualizer
+```
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { visualizer } from "rollup-plugin-visualizer";
+export default defineConfig({
+  plugins: [
+    visualizer({
+      open: true, // ブラウザでレポートを自動的に開く
+      filename: "stats.html",
+      gzipSize: true,
+      brotliSize: true,
+    }),
+  ],
+});
+```
+ </Tab>
+ <Tab value="nextjs (turbopack)">
+### Next.js (Turbopack)
+App RouterとTurbopackを使用しているプロジェクトの場合、Next.jsは追加の依存関係を必要としない組み込みの実験的なアナライザーを提供しています。
+```bash packageManager='npm'
+npx next experimental-analyze
+```
+```bash packageManager='yarn'
+yarn next experimental-analyze
+```
+```bash packageManager='pnpm'
+pnpm next experimental-analyze
+```
+```bash packageManager='bun'
+bun next experimental-analyze
+```
+ </Tab>
+ <Tab value="nextjs (Webpack)">
+### Next.js (Webpack)
+Next.jsでデフォルトのWebpackバンドラーを使用している場合は、公式のバンドルアナライザーを使用してください。ビルド中に環境変数を設定することでトリガーされます。
+```bash packageManager='npm'
+npm install -D @next/bundle-analyzer
+```
+```bash packageManager='yarn'
+yarn add -D @next/bundle-analyzer
+```
+```bash packageManager='pnpm'
+pnpm add -D @next/bundle-analyzer
+```
+```bash packageManager='bun'
+bun add -d @next/bundle-analyzer
+```
+```javascript fileName="next.config.js"
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled: process.env.ANALYZE === "true",
+});
+module.exports = withBundleAnalyzer({
+  // Next.jsの設定
+});
+```
+**使用方法:**
+```bash
+ANALYZE=true npm run build
+```
+ </Tab>
+ <Tab value="Webpack (CRA / Angular / etc)">
+### 標準Webpack
+Create React App (ejected)、Angular、またはカスタムのWebpack設定の場合は、業界標準の `webpack-bundle-analyzer` を使用してください。
+```bash packageManager='npm'
+npm install -D webpack-bundle-analyzer
+```
+```bash packageManager='yarn'
+yarn add -D webpack-bundle-analyzer
+```
+```bash packageManager='pnpm'
+pnpm add -D webpack-bundle-analyzer
+```
+```bash packageManager='bun'
+bun add -d webpack-bundle-analyzer
+```
+```typescript fileName="webpack.config.ts
+import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
+export default {
+  plugins: [
+    new BundleAnalyzerPlugin({
+      analyzerMode: "static",
+      reportFilename: "bundle-analyzer.html",
+      openAnalyzer: false,
+    }),
+  ],
+};
+```
+ </Tab>
+</Tabs>
+## 仕組み
+Intlayerは**コンポーネント単位のアプローチ**を採用しています。グローバルなJSONファイルとは異なり、コンテンツはコンポーネントの隣または内部で定義されます。ビルドプロセス中、Intlayerは以下を行います：
+1.  コードを**分析**して `useIntlayer` の呼び出しを見つけます。
+2.  対応する辞書コンテンツを**構築**します。
+3.  設定に基づいて `useIntlayer` の呼び出しを最適化されたコードに**置き換え**ます。
+これにより、以下が保証されます：
+- コンポーネントがインポートされていない場合、そのコンテンツはバンドルに含まれません（デッドコード削除）。
+- コンポーネントが遅延読み込み（lazy loading）される場合、そのコンテンツも遅延読み込みされます。
+## プラットフォーム別のセットアップ
+<Tabs>
+ <Tab value="nextjs">
+### Next.js
+Next.jsはビルドにSWCを使用するため、変換を処理するために `@intlayer/swc` プラグインが必要です。
+> SWCプラグインはNext.jsにおいてまだ実験段階であるため、このプラグインはデフォルトではインストールされません。将来的に変更される可能性があります。
+```bash packageManager="npm"
+npm install -D @intlayer/swc
+```
+```bash packageManager="yarn"
+yarn add -D @intlayer/swc
+```
+```bash packageManager="pnpm"
+pnpm add -D @intlayer/swc
+```
+```bash packageManager="bun"
+bun add -d @intlayer/swc
+```
+インストールされると、Intlayerは自動的にプラグインを検出して使用します。
+ </Tab>
+ <Tab value="vite">
+### Vite
+Viteは `vite-intlayer` の依存関係として含まれている `@intlayer/babel` プラグインを使用します。最適化はデフォルトで有効になっています。他に行うことはありません。
+ </Tab>
+ <Tab value="webpack">
+### Webpack
+WebpackでIntlayerを使用したバンドル最適化を有効にするには、適切なBabel (`@intlayer/babel`) または SWC (`@intlayer/swc`) プラグインをインストールして構成する必要があります。
+```bash packageManager="npm"
+npm install -D @intlayer/babel
+```
+```bash packageManager="yarn"
+yarn add -D @intlayer/babel
+```
+```bash packageManager="pnpm"
+pnpm add -D @intlayer/babel
+```
+```bash packageManager="bun"
+bun add -d @intlayer/babel
+```
+```typescript fileName="babel.config.js"
+const {
+  getOptimizePluginOptions,
+  intlayerOptimizeBabelPlugin,
+} = require("@intlayer/babel");
+module.exports = {
+  plugins: [[intlayerOptimizeBabelPlugin, getOptimizePluginOptions()]],
+};
+```
+ </Tab>
+</Tabs>
+## 構成
+`intlayer.config.ts` の `build` プロパティを介して、Intlayerがバンドルを最適化する方法を制御できます。
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  dictionary: {
+    importMode: "dynamic",
+  },
+  build: {
+    /**
+     * バンドルサイズを削減するために辞書を縮小（minify）します。
+     */
+     minify: true;
+    /**
+     * 辞書内の未使用のキーを削除（purge）します。
+     */
+     purge: true;
+    /**
+     * ビルド時にTypeScriptの型チェックを行うかどうかを指定します。
+     */
+    checkTypes: false;
+  },
+};
+export default config;
+```
+> ほとんどの場合、`optimize` オプションはデフォルトのままにすることをお勧めします。
+> 構成の詳細はドキュメントを参照してください: [構成](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)
+### ビルドオプション
+`build` 構成オブジェクトでは、以下のオプションが利用可能です：
+| プロパティ     | 型        | デフォルト  | 説明                                                                                                                                                                                                          |
+| :------------- | :-------- | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **`optimize`** | `boolean` | `undefined` | ビルド最適化を有効にするかどうかを制御します。`true` の場合、Intlayerは辞書の呼び出しを最適化された注入に置き換えます。`false` の場合、最適化は無効になります。本番環境では `true` に設定するのが理想的です。 |
+| **`minify`**   | `boolean` | `false`     | バンドルサイズを削減するために辞書を縮小するかどうか。                                                                                                                                                        |
+| **`purge`**    | `boolean` | `false`     | 辞書内の未使用のキーを削除するかどうか。                                                                                                                                                                      |
+### ミニフィケーション（縮小化）
+辞書をミニファイすることで、不要な空白やコメントを削除し、JSONコンテンツのサイズを削減します。これは大きな辞書の場合に特に有効です。
+```typescript fileName="intlayer.config.ts"
+import type { IntlayerConfig } from "intlayer";
+const config: IntlayerConfig = {
+  build: {
+    minify: true,
+  },
+};
+export default config;
+```
+> 注意: `optimize` が無効な場合、またはビジュアルエディタが有効な場合（エディタが編集のために完全なコンテンツを必要とするため）、ミニフィケーションは無視されます。
+### パージング（未使用キーの削除）
+パージングにより、コード内で実際に使用されているキーのみが最終的な辞書バンドルに含まれるようになります。アプリケーションのすべての部分で使用されていないキーが多数含まれる大きな辞書がある場合、これによりバンドルサイズを大幅に削減できます。
+```typescript fileName="intlayer.config.ts"
+import type { IntlayerConfig } from "intlayer";
+const config: IntlayerConfig = {
+  build: {
+    purge: true,
+  },
+};
+export default config;
+```
+> 注意: `optimize` が無効な場合、パージングは無視されます。
+### インポートモード
+複数のページとロケールを含む大規模なアプリケーションでは、JSONファイルがバンドルサイズの大部分を占める可能性があります。Intlayerでは、辞書の読み込み方法を制御できます。
+インポートモードは、`intlayer.config.ts` ファイルでグローバルにデフォルト設定を定義できます。
+```typescript fileName="intlayer.config.ts"
+import type { IntlayerConfig } from "intlayer";
+const config: IntlayerConfig = {
+  build: {
+    minify: true,
+  },
+};
+export default config;
+```
+また、`.content.{{ts|tsx|js|jsx|mjs|cjs|json|jsonc|json5}}` ファイル内の各辞書に対しても定義できます。
+```ts
+import { type Dictionary, t } from "intlayer";
+const appContent: Dictionary = {
+  key: "app",
+  importMode: "dynamic", // デフォルトのインポートモードを上書き
+  content: {
+    // ...
+  },
+};
+export default appContent;
+```
+| プロパティ       | 型                                 | デフォルト | 説明                                                                                                            |
+| :--------------- | :--------------------------------- | :--------- | :-------------------------------------------------------------------------------------------------------------- |
+| **`importMode`** | `'static'`, `'dynamic'`, `'fetch'` | `'static'` | **非推奨**: 代わりに `dictionary.importMode` を使用してください。辞書の読み込み方法を決定します（詳細は後述）。 |
+`importMode` 設定は、辞書コンテンツがどのようにコンポーネントに注入されるかを規定します。
+`intlayer.config.ts` ファイルの `dictionary` オブジェクトの下でグローバルに定義することも、特定の辞書の `.content.ts` ファイルで上書きすることもできます。
+### 1. 静的モード (`default`)
+静的モードでは、Intlayerは `useIntlayer` を `useDictionary` に置き換え、辞書をJavaScriptバンドルに直接注入します。
+- **メリット:** 即時レンダリング（同期）、ハイドレーション中に追加のネットワークリクエストが発生しない。
+- **デメリット:** バンドルに、その特定のコンポーネントで使用可能な**すべての**言語の翻訳が含まれる。
+- **最適なケース:** シングルページアプリケーション（SPA）。
+**変換後のコード例:**
+```tsx
+// 元のコード
+const content = useIntlayer("my-key");
+// 最適化されたコード（静的）
+const content = useDictionary({
+  key: "my-key",
+  content: {
+    nodeType: "translation",
+    translation: {
+      en: "My title",
+      fr: "Mon titre",
+    },
+  },
+});
+```
+### 2. 動的モード
+動的モードでは、Intlayerは `useIntlayer` を `useDictionaryAsync` に置き換えます。これは `import()`（Suspenseのような仕組み）を使用して、現在のロケールのJSONを具体的に遅延読み込みします。
+- **メリット:** **ロケールレベルのツリーシェイキング。** 英語版を表示しているユーザーは英語版の辞書のみをダウンロードし、フランス語版が読み込まれることはありません。
+- **デメリット:** ハイドレーション中にコンポーネントごとにネットワークリクエスト（アセットの取得）が発生する。
+- **最適なケース:** バンドルサイズが非常に重要で、多くの言語、大きなテキストブロック、記事などをサポートする場合。
+**変換後のコード例:**
+```tsx
+// 元のコード
+const content = useIntlayer("my-key");
+// 最適化されたコード（動的）
+const content = useDictionaryAsync({
+  en: () =>
+    import(".intlayer/dynamic_dictionary/my-key/en.json").then(
+      (mod) => mod.default
+    ),
+  fr: () =>
+    import(".intlayer/dynamic_dictionary/my-key/fr.json").then(
+      (mod) => mod.default
+    ),
+});
+```
+> `importMode: 'dynamic'` を使用する場合、1ページに `useIntlayer` を使用するコンポーネントが100個あると、ブラウザは100回の個別のフェッチを試みます。このリクエストの「ウォーターフォール」を避けるために、アトムコンポーネントごとに1つではなく、ページセクションごとに1つの辞書といったように、コンテンツをより少ない `.content` ファイルにグループ化してください。
+### 3. フェッチモード
+動的モードと同様に動作しますが、まずIntlayer Live Sync APIから辞書の取得を試みます。API呼び出しが失敗するか、コンテンツがライブアップデート対象でない場合は、動的インポートにフォールバックします。
+> 詳細はCMSドキュメントを参照してください: [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_CMS.md)
+> フェッチモードでは、パージとミニフィケーションは使用できません。
+## まとめ: 静的 vs 動的
+| 特徴                       | 静的モード                           | 動的モード                            |
+| :------------------------- | :----------------------------------- | :------------------------------------ |
+| **JSバンドルサイズ**       | 最大（コンポーネントの全言語を含む） | 最小（コードのみ、コンテンツなし）    |
+| **初期読み込み**           | 即時（バンドル内にコンテンツあり）   | わずかな遅延（JSONをフェッチ）        |
+| **ネットワークリクエスト** | 0 回（追加リクエストなし）           | 辞書ごとに 1 回                       |
+| **ツリーシェイキング**     | コンポーネントレベル                 | コンポーネントレベル + ロケールレベル |
+| **最適なユースケース**     | UIコンポーネント、小規模アプリ       | テキストが多いページ、多言語対応      |

package/docs/ja/intlayer_with_next-i18next.md CHANGED Viewed

@@ -256,7 +256,7 @@ export default function LocaleLayout({
   params: { locale: string };
 }) {
   const locale: Locale = (locales as readonly string[]).includes(params.locale)
-    ? (params.locale as any)
+    ? params.locale
     : defaultLocale;
   const dir = isRtl(locale) ? "rtl" : "ltr";

package/docs/ja/intlayer_with_next-intl.md CHANGED Viewed

@@ -103,7 +103,7 @@ async function loadMessages(locale: string) {
 }
 export default getRequestConfig(async ({ locale }) => {
-  if (!locales.includes(locale as any)) notFound();
+  if (!locales.includes(locale)) notFound();
   return {
     messages: await loadMessages(locale),

package/docs/ja/intlayer_with_tanstack+solid.md CHANGED Viewed

@@ -194,9 +194,7 @@ const RootComponent: ParentComponent = (props) => {
       </head>
       <body>
         <IntlayerProvider locale={locale}>
-          <Suspense>
-            {props.children}
-          </Suspense>
+          <Suspense>{props.children}</Suspense>
         </IntlayerProvider>
         <Scripts />
       </body>
@@ -506,12 +504,33 @@ export const Route = createFileRoute("/{-$locale}/")({
   component: RouteComponent,
   head: ({ params }) => {
     const { locale } = params;
-    const metaContent = getIntlayer("page-metadata", locale);
+    const path = "/"; // The path for this route
+    const metaContent = getIntlayer("app", locale);
     return {
+      links: [
+        // Canonical link: Points to the current localized page
+        { rel: "canonical", href: getLocalizedUrl(path, locale) },
+        // Hreflang: Tell Google about all localized versions
+        ...localeMap(({ locale: mapLocale }) => ({
+          rel: "alternate",
+          hrefLang: mapLocale,
+          href: getLocalizedUrl(path, mapLocale),
+        })),
+        // x-default: For users in unmatched languages
+        // Define the default fallback locale (usually your primary language)
+        {
+          rel: "alternate",
+          hrefLang: "x-default",
+          href: getLocalizedUrl(path, defaultLocale),
+        },
+      ],
       meta: [
         { title: metaContent.title },
-        { content: metaContent.description, name: "description" },
+        { name: "description", content: metaContent.meta.description },
       ],
     };
   },