@intlayer/docs 9.0.0-canary.4 → 9.0.0-canary.6

package/blog/it/vue-i18n_vs_intlayer.md

@@ -251,6 +251,14 @@ Questo approccio:
 
 ---
 
+## Interoperabilità con vue-i18n
+
+`intlayer` può anche aiutarti a gestire i tuoi namespace `vue-i18n`.
+
+Utilizzando `intlayer`, puoi dichiarare i tuoi contenuti nel formato della tua libreria i18n preferita, e intlayer genererà i tuoi namespace nella posizione di tua scelta (esempio: `/messages/{{locale}}/{{namespace}}.json`).
+
+---
+
 ## Note pratiche per la migrazione (vue-i18n → Intlayer)
 
 - **Inizia per funzionalità**: Sposta una rotta/vista/componente alla volta nei dizionari locali di Intlayer.

package/blog/ja/intlayer_with_i18next.md

@@ -34,6 +34,10 @@ author: aymericzip
 
 <iframe title="Intlayerを使ってi18nextのJSON翻訳を自動化する方法" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/MpGMxniDHNg?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
 
+## 目次
+
+<TOC/>
+
 ## Intlayerとは何ですか？
 
 **Intlayer**は、従来のi18nソリューションの欠点を解決するために設計された革新的なオープンソースの国際化ライブラリです。JavaScriptアプリケーションにおけるコンテンツ管理に対して、モダンなアプローチを提供します。

package/blog/ja/intlayer_with_next-i18next.md

@@ -34,17 +34,6 @@ author: aymericzip
 
 <TOC/>
 
-## next-i18next とは何か？
-
-**next-i18next** は、Next.js アプリケーション向けの最も人気のある国際化（i18n）フレームワークの一つです。強力な **i18next** エコシステムの上に構築されており、Next.js プロジェクトにおける翻訳、ローカリゼーション、言語切り替えの管理に包括的なソリューションを提供します。
-
-しかし、next-i18next にはいくつかの課題があります：
-
-- **複雑な設定**：next-i18next のセットアップには複数の設定ファイルが必要であり、サーバーサイドとクライアントサイドの i18n インスタンスを慎重に設定する必要があります。
-- **翻訳ファイルの分散**：翻訳ファイルは通常、コンポーネントとは別のディレクトリに保存されているため、一貫性の維持が難しくなります。
-- **手動のネームスペース管理**：開発者はネームスペースを手動で管理し、翻訳リソースの適切な読み込みを確保する必要があります。
-- **限定的な型安全性**：TypeScript のサポートには追加の設定が必要であり、翻訳の自動型生成は提供されません。
-
 ## Intlayerとは？
 
 **Intlayer** は、従来のi18nソリューションの欠点を解決するために設計された革新的なオープンソースの国際化ライブラリです。Next.jsアプリケーションにおけるコンテンツ管理に対してモダンなアプローチを提供します。

package/blog/ja/intlayer_with_next-intl.md

@@ -29,6 +29,10 @@ author: aymericzip
 
 <iframe title="Intlayerを使ってnext-intlのJSON翻訳を自動化する方法" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/MpGMxniDHNg?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
 
+# 目次
+
+<TOC/>
+
 ## Intlayerとは？
 
 **Intlayer**は、従来のi18nソリューションの欠点を解決するために設計された革新的なオープンソースの国際化ライブラリです。Next.jsアプリケーションにおけるコンテンツ管理に対して、モダンなアプローチを提供します。

package/blog/ja/l10n_platform_alternative/Lokalise.md

@@ -40,6 +40,16 @@ Lokaliseは現代のTMS領域で重要なプレーヤーです。2017年に設
 
 Intlayerは主にi18nソリューションとして知られていますが、ヘッドレスCMSも統合しています。Lokaliseが主に文字列の外部同期ツールとして機能するのとは異なり、Intlayerはコードにより近い位置で動作します。バンドル層からリモートコンテンツ配信までスタック全体を制御することで、コンテンツのフローがよりスムーズかつ効率的になります。
 
+## AIの登場以来、なぜパラダイムは変わったのか？
+
+Lokaliseはローカライゼーションの「DevOps」側を完成させ、文字列を自動的に移動しました。しかし、大規模言語モデル（LLM）の登場により、ローカライゼーションのパラダイムが根本的に変わりました。ボトルネックはもはや文字列を*移動*することではなく、それらを*生成*することです。
+
+LLMを使用することで、翻訳のコストは急落し、スピードは指数関数的に増加しました。ローカライゼーションチームの役割は「翻訳者の管理」から「コンテキストとレビューの管理」へシフトしています。
+
+Lokaliseはai機能を追加しましたが、根本的には人間のワークフローを管理し、シート数またはキー数で料金を請求するように設計されたプラットフォームのままです。AIファースト・ワールドでは、価値は、人間のエージェンシーにタスクを割り当てることがいかに簡単かではなく、コンテキスト対応コンテンツを生成するためにaiモデルをいかに上手くオーケストレーションできるかにあります。
+
+今日、最も効率的なワークフローは、まずaiを使用してページをグローバルに翻訳して配置することです。その後、第2段階では、人間のコピーライターを使用して、製品がすでに収益を生み出しているときに、高トラフィック・コンテンツを最適化して変換を促進します。
+
 ## AI以降、なぜパラダイムは変わったのか？
 
 Lokaliseはローカリゼーションの「DevOps」側、つまり文字列を自動的に移動する仕組みを完成させました。しかし、Large Language Models（LLMs）の到来により、ローカリゼーションのパラダイムは根本的に変化しました。ボトルネックはもはや*文字列を移動すること*ではなく、*それらを生成すること*です。

package/blog/ja/next-i18next_vs_next-intl_vs_intlayer.md

@@ -65,14 +65,6 @@ Next.js向けの3つのi18nオプション、next-i18next、next-intl、Intlayer
 
 ## 並列機能比較（Next.jsに特化）
 
-| 機能 | `next-intlayer` (Intlayer) | `next-intl` | `next-i18next` |
-
-> バッジは自動的に更新されます。スナップショットは時間とともに変化します。
-
----
-
-## 並列機能比較（Next.jsに特化）
-
 | 機能                                                         | `next-intlayer` (Intlayer)                                                                                                     | `next-intl`                                                                                                          | `next-i18next`                                                                                                       |
 | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
 | **コンポーネント近くの翻訳**                                 | ✅ はい、各コンポーネントにコンテンツが配置されています                                                                        | ❌ いいえ                                                                                                            | ❌ いいえ                                                                                                            |
@@ -212,24 +204,6 @@ Next.jsは国際化されたルーティング（例：ロケールセグメン
 
 ---
 
-## 翻訳欠落の取り扱い
-
-**next-intl**
-
-- **実行時のフォールバック**に依存（例：キーやデフォルトロケールを表示）。ビルドは失敗しません。
-
-**next-i18next**
-
-- **実行時のフォールバック**に依存（例：キーやデフォルトロケールを表示）。ビルドは失敗しません。
-
-**intlayer**
-
-- **ビルド時検出**により、ロケールやキーの欠落に対して**警告/エラー**を出します。
-
-**なぜ重要か:** ビルド時に欠落を検出することで、本番環境での「謎の文字列」発生を防ぎ、厳格なリリースゲートに適合します。
-
----
-
 ## ルーティング、ミドルウェア & URL戦略
 
 <Columns>
@@ -1183,6 +1157,127 @@ export default robots;
 
 ---
 
+### ロケール ルーティング用ミドルウェア
+
+<Tabs defaultTab="next-intl" group='techno'>
+  <Tab label="next-i18next" value="next-i18next">
+
+ロケール検出とルーティングを処理するミドルウェアを追加します:
+
+```ts fileName="src/middleware.ts"
+import { NextResponse, type NextRequest } from "next/server";
+import { defaultLocale, locales } from "@/i18n.config";
+
+const PUBLIC_FILE = /\.[^/]+$/; // 拡張子を持つファイルを除外
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+
+  if (
+    pathname.startsWith("/_next") ||
+    pathname.startsWith("/api") ||
+    pathname.startsWith("/static") ||
+    PUBLIC_FILE.test(pathname)
+  ) {
+    return;
+  }
+
+  const hasLocale = locales.some(
+    (l) => pathname === "/" + l || pathname.startsWith("/" + l + "/")
+  );
+  if (!hasLocale) {
+    const locale = defaultLocale;
+    const url = request.nextUrl.clone();
+    url.pathname = "/" + locale + (pathname === "/" ? "" : pathname);
+    return NextResponse.redirect(url);
+  }
+}
+
+export const config = {
+  matcher: [
+    // これらで始まるパスとファイル拡張子を持つファイルを除いたすべてのパスにマッチ
+    "/((?!api|_next|static|.*\\..*).*)",
+  ],
+};
+```
+
+  </Tab>
+  <Tab label="next-intl" value="next-intl">
+
+ロケール検出とルーティングを処理するミドルウェアを追加します:
+
+```ts fileName="src/middleware.ts"
+import createMiddleware from "next-intl/middleware";
+import { locales, defaultLocale } from "@/i18n";
+
+export default createMiddleware({
+  locales: [...locales],
+  defaultLocale,
+  localeDetection: true,
+});
+
+export const config = {
+  // API、Next内部、静的アセットをスキップ
+  matcher: ["/((?!api|_next|.*\\..*).*)"],
+};
+```
+
+  </Tab>
+  <Tab label="intlayer" value="intlayer">
+
+Intlayerは`next-intlayer`パッケージの設定を通じて、組み込みのミドルウェア処理を提供します。
+
+```ts fileName="src/middleware.ts"
+import { intlayerProxy } from "next-intlayer/proxy";
+
+export const middleware = intlayerProxy();
+
+// このミドルウェアをappディレクトリ内のファイルにのみ適用
+export const config = {
+  matcher: "/((?!api|_next|static|.*\\..*).*)",
+};
+```
+
+ミドルウェアのセットアップは`intlayer.config.ts`ファイルで一元管理されます。
+
+  </Tab>
+</Tabs>
+
+### セットアップチェックリストとベストプラクティス
+
+<Tabs defaultTab="next-intl" group='techno'>
+  <Tab label="next-i18next" value="next-i18next">
+
+- `src/app/[locale]/layout.tsx` のルート `<html>` に `lang` と `dir` が設定されていることを確認してください。
+- `src/locales/<locale>/` の下に翻訳を名前空間に分割してください（例：`common.json`、`about.json`）。
+- クライアントコンポーネントで `useTranslation('<ns>')` を使用して必要な名前空間のみをロードし、`I18nProvider` を同じ名前空間でスコープしてください。
+- 可能な限りページを静的に保つ：ページで `export const dynamic = 'force-static'` をエクスポートし、`dynamicParams = false` を設定して `generateStaticParams` を実装してください。
+- クライアント境界の下にネストされた同期サーバーコンポーネントを使用して、既に計算された文字列または `t` 関数と `locale` を渡してください。
+- SEO については、メタデータで `alternates.languages` を設定し、`sitemap.ts` でローカライズされた URL をリストアップし、`robots.ts` で重複したローカライズされたルートを禁止してください。
+- ロケール対応のフォーマッタ（例：`Intl.NumberFormat(locale)`）を優先し、React < 19 を使用している場合はクライアントでメモ化してください。
+
+  </Tab>
+  <Tab label="next-intl" value="next-intl">
+
+- **html の `lang` と `dir` を設定する**：`src/app/[locale]/layout.tsx` で `getLocaleDirection(locale)` を使用して `dir` を計算し、`<html lang={locale} dir={dir}>` を設定してください。
+- **メッセージを名前空間で分割する**：ロケールと名前空間ごとに JSON を整理してください（例：`common.json`、`about.json`）。
+- **クライアントペイロードを最小化する**：ページで、必要な名前空間のみを `NextIntlClientProvider` に送信してください（例：`pick(messages, ['common', 'about'])`）。
+- **静的ページを優先する**：`export const dynamic = 'force-static'` をエクスポートし、すべての `locales` に対して静的パラメータを生成してください。
+- **同期サーバーコンポーネント**：非同期呼び出しまたは非シリアル化可能な関数ではなく、事前計算された文字列（翻訳されたラベル、フォーマットされた数字）を渡すことでサーバーコンポーネントを同期に保ってください。
+
+  </Tab>
+  <Tab label="intlayer" value="intlayer">
+
+- **モジュラーコンテンツ**：`.content.{ts|js|json}` ファイルを使用してコンテンツ辞書をコンポーネントと共存させてください。
+- **タイプセーフティ**：TypeScript 統合を活用してコンパイル時のコンテンツ検証を行ってください。
+- **ビルドタイム最適化**：Intlayer のビルドツールを使用して自動的なツリーシェイキングとバンドル最適化を行ってください。
+- **統合ツール**：組み込みのルーティング、SEO ヘルパー、ビジュアルエディタサポートを活用してください。
+
+  </Tab>
+</Tabs>
+
+---
+
 ## そして勝者は…
 
 簡単ではありません。各オプションにはトレードオフがあります。私の見解は以下の通りです：

package/blog/ja/rag_powered_documentation_assistant.md

@@ -313,3 +313,16 @@ RAGは、LLMを実用的にする最もシンプルで強力な方法の一つ
 </Step>
 
 </Steps>
+## 結論
+
+RAGは、LLMを実用的にするための最もシンプルで強力な方法の1つです。**検索 + 生成**を組み合わせることで、静的なドキュメントを**スマートアシスタント**に変換し、同時に継続的な製品インサイトの流れを得ることができます。
+
+このプロジェクトを通じて、RAGは単なる技術的なトリックではないことが分かりました。それはドキュメントを以下のものに変換する方法です：
+
+- インタラクティブなサポートシステム
+- フィードバックチャネル
+- 製品戦略ツール
+
+👉 [デモを試す](https://intlayer.org/doc/why) 👉 [GitHubでコードテンプレートを確認](https://github.com/aymericzip/smart_doc_RAG)
+
+RAGを試していると思ったら、どのように使用しているのか聞きたいです。

package/blog/ja/react-i18next_vs_react-intl_vs_intlayer.md

@@ -146,6 +146,12 @@ author: aymericzip
 
 ---
 
+## GitHub STARs
+
+GitHub スターはプロジェクトの人気度、コミュニティからの信頼、長期的な関連性の強い指標です。技術的な品質の直接的な測定ではありませんが、多くの開発者がプロジェクトを有用であると判断し、その進捗をフォローし、採用する可能性があることを反映しています。プロジェクトの価値を見積もるために、スターは代替案間での牽引力を比較し、エコシステムの成長に関する洞察を提供するのに役立ちます。
+
+[![Star History Chart](https://api.star-history.com/chart?repos=formatjs/formatjs%2Ci18next/react-i18next%2Caymericzip/intlayer&type=date&legend=top-left)](https://www.star-history.com/#formatjs/formatjs&i18next/react-i18next&aymericzip/intlayer)
+
 ## 結論
 
 3つのライブラリはすべてReactのローカライズを効果的に行います。差別化のポイントは、安全でスケーラブルなセットアップを実現するためにどれだけの**インフラストラクチャ**を構築する必要があるかです。

package/blog/ja/vue-i18n_vs_intlayer.md

@@ -259,6 +259,14 @@ const { greeting } = useIntlayer("component-example");
 
 ---
 
+## GitHub スター
+
+GitHub のスターは、プロジェクトの人気度、コミュニティの信頼、および長期的な関連性の強力な指標です。技術的品質の直接的な尺度ではありませんが、多くの開発者がプロジェクトを有用であると認識し、その進行状況をフォローし、採用する可能性があることを反映しています。プロジェクトの価値を見積もるために、スターは代替案間の牽引力を比較し、エコシステムの成長に関する洞察を提供するのに役立ちます。
+
+[![Star History Chart](https://api.star-history.com/svg?repos=intlify/vue-i18n&repos=aymericzip/intlayer&type=Date)](https://www.star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
+
+---
+
 ## 結論
 
 **vue-i18n** と **Intlayer** はどちらも Vue アプリのローカライズに優れています。違いは、堅牢でスケーラブルなセットアップを実現するために、**どれだけ自分で構築する必要があるか**にあります：

package/blog/ko/intlayer_with_i18next.md

@@ -34,6 +34,10 @@ author: aymericzip
 
 <iframe title="Intlayer를 사용하여 i18next JSON 번역 자동화하는 방법" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/MpGMxniDHNg?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
 
+## 목차
+
+<TOC/>
+
 ## Intlayer란 무엇인가요?
 
 **Intlayer**는 전통적인 i18n 솔루션의 한계를 극복하기 위해 설계된 혁신적이고 오픈 소스인 국제화 라이브러리입니다. JavaScript 애플리케이션에서 콘텐츠 관리를 위한 현대적인 접근 방식을 제공합니다.

package/blog/ko/intlayer_with_next-i18next.md

@@ -34,17 +34,6 @@ author: aymericzip
 
 <TOC/>
 
-## next-i18next란 무엇인가?
-
-**next-i18next**는 Next.js 애플리케이션을 위한 가장 인기 있는 국제화(i18n) 프레임워크 중 하나입니다. 강력한 **i18next** 생태계 위에 구축되어, Next.js 프로젝트에서 번역, 현지화, 언어 전환을 관리하는 포괄적인 솔루션을 제공합니다.
-
-하지만 next-i18next에는 몇 가지 어려움이 있습니다:
-
-- **복잡한 설정**: next-i18next를 설정하려면 여러 구성 파일과 서버 측 및 클라이언트 측 i18n 인스턴스의 신중한 설정이 필요합니다.
-- **분산된 번역 파일**: 번역 파일이 일반적으로 컴포넌트와 별도의 디렉토리에 저장되어 일관성을 유지하기 어렵습니다.
-- **수동 네임스페이스 관리**: 개발자가 네임스페이스를 수동으로 관리하고 번역 리소스가 제대로 로드되도록 해야 합니다.
-- **제한된 타입 안전성**: TypeScript 지원은 추가 구성이 필요하며 번역에 대한 자동 타입 생성을 제공하지 않습니다.
-
 ## Intlayer란 무엇인가요?
 
 **Intlayer**는 전통적인 i18n 솔루션의 단점을 해결하기 위해 설계된 혁신적이고 오픈 소스인 국제화 라이브러리입니다. Next.js 애플리케이션에서 콘텐츠 관리를 위한 현대적인 접근 방식을 제공합니다.

package/blog/ko/intlayer_with_next-intl.md

@@ -29,6 +29,10 @@ author: aymericzip
 
 <iframe title="Intlayer를 사용하여 next-intl JSON 번역 자동화하는 방법" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/MpGMxniDHNg?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
 
+# 목차
+
+<TOC/>
+
 ## Intlayer란 무엇인가요?
 
 **Intlayer**는 전통적인 i18n 솔루션의 한계를 극복하기 위해 설계된 혁신적이고 오픈 소스인 국제화 라이브러리입니다. Next.js 애플리케이션에서 콘텐츠 관리를 위한 현대적인 접근 방식을 제공합니다.

package/blog/ko/next-i18next_vs_next-intl_vs_intlayer.md

@@ -204,24 +204,6 @@ Next.js는 국제화된 라우팅(예: 로케일 세그먼트)을 기본적으
 
 ---
 
-## 누락된 번역 처리
-
-**next-intl**
-
-- **런타임 폴백**에 의존합니다(예: 키 또는 기본 로케일 표시). 빌드는 실패하지 않습니다.
-
-**next-i18next**
-
-- **런타임 폴백**에 의존합니다(예: 키 또는 기본 로케일 표시). 빌드는 실패하지 않습니다.
-
-**intlayer**
-
-- 누락된 로케일이나 키에 대해 **빌드 타임 감지**와 **경고/오류**를 제공합니다.
-
-**중요한 이유:** 빌드 중에 누락을 잡으면 프로덕션에서 “미스터리 문자열”을 방지하고 엄격한 릴리스 게이트와 일치합니다.
-
----
-
 ## 라우팅, 미들웨어 및 URL 전략
 
 <Columns>
@@ -1175,6 +1157,127 @@ export default robots;
 
 ---
 
+### 로케일 라우팅을 위한 Middleware
+
+<Tabs defaultTab="next-intl" group='techno'>
+  <Tab label="next-i18next" value="next-i18next">
+
+로케일 감지 및 라우팅을 처리하기 위한 middleware를 추가합니다:
+
+```ts fileName="src/middleware.ts"
+import { NextResponse, type NextRequest } from "next/server";
+import { defaultLocale, locales } from "@/i18n.config";
+
+const PUBLIC_FILE = /\.[^/]+$/; // 확장자가 있는 파일 제외
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+
+  if (
+    pathname.startsWith("/_next") ||
+    pathname.startsWith("/api") ||
+    pathname.startsWith("/static") ||
+    PUBLIC_FILE.test(pathname)
+  ) {
+    return;
+  }
+
+  const hasLocale = locales.some(
+    (l) => pathname === "/" + l || pathname.startsWith("/" + l + "/")
+  );
+  if (!hasLocale) {
+    const locale = defaultLocale;
+    const url = request.nextUrl.clone();
+    url.pathname = "/" + locale + (pathname === "/" ? "" : pathname);
+    return NextResponse.redirect(url);
+  }
+}
+
+export const config = {
+  matcher: [
+    // 이들로 시작하는 경로와 확장자가 있는 파일을 제외한 모든 경로와 일치
+    "/((?!api|_next|static|.*\\..*).*)",
+  ],
+};
+```
+
+  </Tab>
+  <Tab label="next-intl" value="next-intl">
+
+로케일 감지 및 라우팅을 처리하기 위한 middleware를 추가합니다:
+
+```ts fileName="src/middleware.ts"
+import createMiddleware from "next-intl/middleware";
+import { locales, defaultLocale } from "@/i18n";
+
+export default createMiddleware({
+  locales: [...locales],
+  defaultLocale,
+  localeDetection: true,
+});
+
+export const config = {
+  // API, Next 내부 및 정적 자산 건너뛰기
+  matcher: ["/((?!api|_next|.*\\..*).*)"],
+};
+```
+
+  </Tab>
+  <Tab label="intlayer" value="intlayer">
+
+Intlayer는 `next-intlayer` package 설정을 통한 기본 제공 middleware 처리를 제공합니다.
+
+```ts fileName="src/middleware.ts"
+import { intlayerProxy } from "next-intlayer/proxy";
+
+export const middleware = intlayerProxy();
+
+// app 디렉토리의 파일에만 이 middleware를 적용합니다
+export const config = {
+  matcher: "/((?!api|_next|static|.*\\..*).*)",
+};
+```
+
+middleware의 설정은 `intlayer.config.ts` 파일에 중앙화되어 있습니다.
+
+  </Tab>
+</Tabs>
+
+### 설정 체크리스트 및 모범 사례
+
+<Tabs defaultTab="next-intl" group='techno'>
+  <Tab label="next-i18next" value="next-i18next">
+
+- `src/app/[locale]/layout.tsx`의 루트 `<html>`에서 `lang`과 `dir`이 설정되어 있는지 확인하세요.
+- `src/locales/<locale>/` 아래에서 번역을 네임스페이스로 분할합니다 (예: `common.json`, `about.json`).
+- 클라이언트 컴포넌트에서 `useTranslation('<ns>')`를 사용하여 필요한 네임스페이스만 로드하고 `I18nProvider`를 동일한 네임스페이스로 범위를 제한합니다.
+- 가능한 경우 페이지를 정적으로 유지합니다: 페이지에서 `export const dynamic = 'force-static'`을 내보내고 `dynamicParams = false`를 설정하고 `generateStaticParams`를 구현합니다.
+- 이미 계산된 문자열이나 `t` 함수 및 `locale`을 전달하여 클라이언트 경계 아래에 동기 서버 컴포넌트를 사용합니다.
+- SEO의 경우, 메타데이터에서 `alternates.languages`를 설정하고 `sitemap.ts`에서 지역화된 URL을 나열하고 `robots.ts`에서 중복된 지역화된 경로를 비활성화합니다.
+- 로케일 인식 포매터 (예: `Intl.NumberFormat(locale)`)를 선호하고 React < 19를 사용하는 경우 클라이언트에서 메모이제이션합니다.
+
+  </Tab>
+  <Tab label="next-intl" value="next-intl">
+
+- **html `lang`과 `dir` 설정**: `src/app/[locale]/layout.tsx`에서 `getLocaleDirection(locale)`을 통해 `dir`을 계산하고 `<html lang={locale} dir={dir}>`을 설정합니다.
+- **네임스페이스별로 메시지 분할**: 로케일 및 네임스페이스별로 JSON을 구성합니다 (예: `common.json`, `about.json`).
+- **클라이언트 페이로드 최소화**: 페이지에서 필요한 네임스페이스만 `NextIntlClientProvider`로 전송합니다 (예: `pick(messages, ['common', 'about'])`).
+- **정적 페이지 선호**: `export const dynamic = 'force-static'`을 내보내고 모든 `locales`에 대한 정적 매개변수를 생성합니다.
+- **동기 서버 컴포넌트**: 비동기 호출이나 직렬화할 수 없는 함수 대신 사전 계산된 문자열 (번역된 레이블, 형식이 지정된 숫자)을 전달하여 서버 컴포넌트를 동기적으로 유지합니다.
+
+  </Tab>
+  <Tab label="intlayer" value="intlayer">
+
+- **모듈식 콘텐츠**: `.content.{ts|js|json}` 파일을 사용하여 콘텐츠 딕셔너리를 컴포넌트와 함께 배치합니다.
+- **타입 안전성**: TypeScript 통합을 활용하여 컴파일 타임 콘텐츠 검증을 수행합니다.
+- **빌드 타임 최적화**: Intlayer의 빌드 도구를 사용하여 자동 트리 셰이킹 및 번들 최적화를 수행합니다.
+- **통합 도구**: 기본 제공 라우팅, SEO 헬퍼 및 비주얼 에디터 지원을 활용합니다.
+
+  </Tab>
+</Tabs>
+
+---
+
 ## 그리고 승자는…
 
 간단하지 않습니다. 각 옵션마다 장단점이 있습니다. 제가 보는 관점은 다음과 같습니다: