@intlayer/docs 8.11.3 → 8.12.0-canary.0

package/blog/ja/i18n_using_next-i18next.md

@@ -80,6 +80,7 @@ history:
   title="デモ CodeSandbox - Intlayerを使ったアプリケーションの国際化方法"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
+/>
 
 > GitHubの[Application Template](https://github.com/aymericzip/next-i18next-template)をご覧ください。
 
@@ -116,7 +117,9 @@ history:
         └── ServerComponent.tsx
 ```
 
-### ステップ 1: 依存関係のインストール
+<Steps>
+
+<Step number={1} title="依存関係のインストール">
 
 必要なパッケージをnpmを使ってインストールします：
 
@@ -136,7 +139,9 @@ yarn add i18next react-i18next i18next-resources-to-backend
 - **react-i18next**: i18nextのReactバインディングで、クライアントコンポーネント向けに`useTranslation`のようなフックを提供します。
 - **i18next-resources-to-backend**: 翻訳ファイルの動的読み込みを可能にするプラグインで、必要な名前空間だけをロードできます。
 
-### ステップ 2: プロジェクトの設定
+</Step>
+
+<Step number={2} title="プロジェクトの設定">
 
 サポートするロケール、デフォルトロケール、およびURLのローカライズ用ヘルパー関数を定義する設定ファイルを作成します。このファイルはi18n設定の単一の真実の情報源として機能し、アプリケーション全体で型安全性を保証します。
 
@@ -189,7 +194,9 @@ export function getCookie(locale: Locale) {
 }
 ```
 
-### ステップ3: 翻訳ネームスペースの集中管理
+</Step>
+
+<Step number={3} title="翻訳ネームスペースの集中管理">
 
 アプリケーションが公開するすべてのnamespaceの単一の真実のソースを作成します。このリストを再利用することで、サーバー、クライアント、およびツールのコードが同期され、翻訳ヘルパーの強力な型付けが可能になります。
 
@@ -199,7 +206,9 @@ export const namespaces = ["common", "about"] as const;
 export type Namespace = (typeof namespaces)[number];
 ```
 
-### ステップ4: TypeScriptで翻訳キーを強く型付けする
+</Step>
+
+<Step number={4} title="TypeScriptで翻訳キーを強く型付けする">
 
 `i18next`を拡張して、標準の言語ファイル（通常は英語）を指すようにします。これによりTypeScriptはnamespaceごとの有効なキーを推論し、`t()`の呼び出しがエンドツーエンドで検証されます。
 
@@ -237,7 +246,9 @@ const { t } = useTranslation("about");
 export type AboutTranslator = TFunction<"about">;
 ```
 
-### ステップ 5: サーバーサイドの i18n 初期化を設定する
+</Step>
+
+<Step number={5} title="サーバーサイドの i18n 初期化を設定する">
 
 サーバーコンポーネントのために翻訳を読み込むサーバーサイド初期化関数を作成します。この関数はサーバーサイドレンダリング用に別のi18nextインスタンスを作成し、レンダリング前に翻訳が読み込まれていることを保証します。
 
@@ -292,7 +303,9 @@ export async function initI18next(
 }
 ```
 
-### ステップ6: クライアントサイドのi18nプロバイダーを作成する
+</Step>
+
+<Step number={6} title="クライアントサイドのi18nプロバイダーを作成する">
 
 i18nextコンテキストでアプリケーションをラップするクライアントコンポーネントプロバイダーを作成します。このプロバイダーはサーバーから事前に読み込まれた翻訳を受け取り、未翻訳コンテンツのフラッシュ（FOUC）を防ぎ、重複フェッチを回避します。
 
@@ -375,7 +388,9 @@ export default function I18nProvider({
 }
 ```
 
-### ステップ7: 動的ロケールルートの定義
+</Step>
+
+<Step number={7} title="動的ロケールルートの定義">
 
 アプリフォルダ内に `[locale]` ディレクトリを作成して、ロケールの動的ルーティングを設定します。これにより、Next.jsは各ロケールをURLのセグメントとして扱うことができるようになります（例：`/en/about`、`/fr/about`）。
 
@@ -427,7 +442,9 @@ export default function LocaleLayout({
 }
 ```
 
-### ステップ8: 翻訳ファイルを作成する
+</Step>
+
+<Step number={8} title="翻訳ファイルを作成する">
 
 各ロケールと名前空間ごとにJSONファイルを作成します。この構造により、翻訳を論理的に整理し、各ページで必要なものだけを読み込むことができます。
 
@@ -493,7 +510,9 @@ export default function LocaleLayout({
 }
 ```
 
-### ステップ9: ページで翻訳を利用する
+</Step>
+
+<Step number={9} title="ページで翻訳を利用する">
 
 i18nextをサーバー上で初期化し、翻訳をサーバーコンポーネントとクライアントコンポーネントの両方に渡すページコンポーネントを作成します。これにより、レンダリング前に翻訳が読み込まれ、コンテンツのフラッシュを防止できます。
 
@@ -553,7 +572,9 @@ export default async function AboutPage({
 }
 ```
 
-### ステップ10: クライアントコンポーネントでの翻訳の使用
+</Step>
+
+<Step number={10} title="クライアントコンポーネントでの翻訳の使用">
 
 クライアントコンポーネントでは、`useTranslation` フックを使用して翻訳にアクセスできます。このフックは翻訳関数とi18nインスタンスへのアクセスを提供し、コンテンツの翻訳やロケール情報の取得を可能にします。
 
@@ -604,7 +625,9 @@ const ClientComponent = () => {
 export default ClientComponent;
 ```
 
-### ステップ11: サーバーコンポーネントでの翻訳の使用
+</Step>
+
+<Step number={11} title="サーバーコンポーネントでの翻訳の使用">
 
 サーバーコンポーネントはReactのフックを使用できないため、親コンポーネントからprops経由で翻訳を受け取ります。この方法により、サーバーコンポーネントは同期的に保たれ、クライアントコンポーネント内にネストすることが可能になります。
 
@@ -650,9 +673,9 @@ const ServerComponent = ({ t, locale, count }: ServerComponentProps) => {
 export default ServerComponent;
 ```
 
----
+</Step>
 
-### （オプション）ステップ12：コンテンツの言語を変更する
+<Step number={12} title="コンテンツの言語を変更する" isOptional={true}>
 
 Next.jsでコンテンツの言語を変更する推奨方法は、ロケール接頭辞付きのURLとNext.jsのリンクを使用することです。以下の例では、現在のロケールをルートから読み取り、パス名からそれを取り除き、利用可能な各ロケールごとにリンクをレンダリングします。
 
@@ -724,7 +747,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### （オプション）ステップ13：ローカライズされたLinkコンポーネントの作成
+</Step>
+
+<Step number={13} title="ローカライズされたLinkコンポーネントの作成" isOptional={true}>
 
 アプリ全体でローカライズされたURLを再利用することで、ナビゲーションの一貫性を保ち、SEOにも効果的です。`next/link`をラップし、内部ルートにはアクティブなロケールをプレフィックスとして付け、外部URLはそのままにする小さなヘルパーを作成しましょう。
 
@@ -775,7 +800,9 @@ export default function LocalizedLink({
 
 > ヒント: `LocalizedLink` はドロップイン置換なので、インポートを差し替えてコンポーネントにロケール固有のURL処理を任せる形で段階的に移行できます。
 
-### （オプション）ステップ14: サーバーアクション内でアクティブなロケールにアクセスする
+</Step>
+
+<Step number={14} title="サーバーアクション内でアクティブなロケールにアクセスする" isOptional={true}>
 
 サーバーアクションでは、メール送信やログ記録、サードパーティ連携のために現在のロケールが必要になることが多いです。プロキシで設定されたロケールクッキーと、フォールバックとしての `Accept-Language` ヘッダーを組み合わせて使用します。
 
@@ -813,7 +840,9 @@ export async function stuffFromServer(formData: FormData) {
 
 > このヘルパーは Next.js のクッキーとヘッダーに依存しているため、Route Handlers、Server Actions、その他のサーバー専用コンテキストで動作します。
 
-### （オプション）ステップ15：メタデータの国際化
+</Step>
+
+<Step number={15} title="メタデータの国際化" isOptional={true}>
 
 コンテンツの翻訳は重要ですが、国際化の主な目的はあなたのウェブサイトを世界により見えるようにすることです。I18n は適切な SEO を通じてウェブサイトの可視性を向上させるための強力な手段です。
 
@@ -880,7 +909,9 @@ export default async function AboutPage() {
 }
 ```
 
-### （オプション）ステップ16：サイトマップの多言語対応
+</Step>
+
+<Step number={16} title="サイトマップの多言語対応" isOptional={true}>
 
 すべてのロケールバージョンのページを含むサイトマップを生成します。これにより、検索エンジンがすべての言語バージョンのコンテンツを検出し、インデックス化しやすくなります。
 
@@ -934,7 +965,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### （オプション）ステップ17: robots.txtの多言語対応
+</Step>
+
+<Step number={17} title="robots.txtの多言語対応" isOptional={true}>
 
 保護されたルートのすべてのロケールバージョンを適切に処理するrobots.txtファイルを作成します。これにより、検索エンジンが管理者ページやダッシュボードページをどの言語でもインデックスしないようにします。
 
@@ -965,7 +998,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### （オプション）ステップ18：ロケールルーティングのためのミドルウェア設定
+</Step>
+
+<Step number={18} title="ロケールルーティングのためのミドルウェア設定" isOptional={true}>
 
 ユーザーの好みのロケールを自動的に検出し、適切なロケール接頭辞付きURLにリダイレクトするプロキシを作成します。これにより、ユーザーは自分の好みの言語でコンテンツを閲覧でき、ユーザー体験が向上します。
 
@@ -1054,7 +1089,9 @@ export const config = {
 };
 ```
 
-### （オプション）ステップ19: Intlayerを使った翻訳の自動化
+</Step>
+
+<Step number={19} title="Intlayerを使った翻訳の自動化" isOptional={true}>
 
 Intlayerは、アプリケーションのローカリゼーションプロセスを支援するために設計された**無料**かつ**オープンソース**のライブラリです。i18nextが翻訳の読み込みと管理を担当する一方で、Intlayerは翻訳ワークフローの自動化を支援します。
 
@@ -1084,3 +1121,7 @@ Intlayerが可能にすること：
   Intlayerは無料のビジュアルエディターを提供しており、視覚的にコンテンツを編集できます。詳細は[翻訳のビジュアル編集](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_visual_editor.md)をご覧ください。
 
 その他にも多数の機能があります。Intlayerが提供するすべての機能については、[Intlayerの利点に関するドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/interest_of_intlayer.md)をご参照ください。
+
+</Step>
+
+</Steps>

package/blog/ja/i18n_using_next-intl.md

@@ -71,6 +71,7 @@ history:
   title="デモ CodeSandbox - Intlayer を使ってアプリケーションを国際化する方法"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
+/>
 
 > GitHub の [Application Template](https://github.com/aymericzip/next-intl-template) を参照してください。
 
@@ -106,7 +107,9 @@ history:
         └── ServerComponent.tsx
 ```
 
-### ステップ1: 依存関係のインストール
+<Steps>
+
+<Step number={1} title="依存関係のインストール">
 
 npmを使って必要なパッケージをインストールします：
 
@@ -124,7 +127,9 @@ yarn add next-intl
 
 - **next-intl**: Next.js App Router向けのコア国際化ライブラリで、翻訳管理のためのフック、サーバー関数、クライアントプロバイダーを提供します。
 
-### ステップ2: プロジェクトの設定
+</Step>
+
+<Step number={2} title="プロジェクトの設定">
 
 サポートするロケールを定義し、next-intlのリクエスト設定を行う設定ファイルを作成します。このファイルはi18n設定の単一の信頼できる情報源として機能し、アプリケーション全体で型安全性を保証します。
 
@@ -208,7 +213,9 @@ export const { Link, redirect, usePathname, useRouter, getPathname } =
 export const proxy = createMiddleware(routingOptions);
 ```
 
-### ステップ3: 動的ロケールルートの定義
+</Step>
+
+<Step number={3} title="動的ロケールルートの定義">
 
 ロケールごとの動的ルーティングを設定するために、アプリフォルダ内に `[locale]` ディレクトリを作成します。これにより、Next.js はロケールベースのルーティングを処理でき、各ロケールが URL セグメント（例：`/en/about`、`/fr/about`）になります。
 
@@ -297,7 +304,9 @@ export default async function AboutPage({
 }
 ```
 
-### ステップ4: 翻訳ファイルを作成する
+</Step>
+
+<Step number={4} title="翻訳ファイルを作成する">
 
 各ロケールと名前空間ごとにJSONファイルを作成します。この構造により、翻訳を論理的に整理し、各ページに必要なものだけを読み込むことができます。
 
@@ -339,7 +348,9 @@ export default async function AboutPage({
 }
 ```
 
-### ステップ5: ページで翻訳を利用する
+</Step>
+
+<Step number={5} title="ページで翻訳を利用する">
 
 サーバーで翻訳を読み込み、それをサーバーコンポーネントとクライアントコンポーネントの両方に渡すページコンポーネントを作成します。これにより、レンダリング前に翻訳が読み込まれ、コンテンツのフラッシュを防止します。
 
@@ -390,7 +401,9 @@ export default async function AboutPage({
 }
 ```
 
-### ステップ6: クライアントコンポーネントでの翻訳の使用
+</Step>
+
+<Step number={6} title="クライアントコンポーネントでの翻訳の使用">
 
 クライアントコンポーネントは、`useTranslations` と `useFormatter` フックを使用して翻訳およびフォーマット関数にアクセスできます。これらのフックは `NextIntlClientProvider` コンテキストから読み取ります。
 
@@ -426,7 +439,9 @@ const ClientComponent = () => {
 };
 ```
 
-### ステップ7: サーバーコンポーネントでの翻訳の使用
+</Step>
+
+<Step number={7} title="サーバーコンポーネントでの翻訳の使用">
 
 サーバーコンポーネントは React フックを使用できないため、親コンポーネントから props 経由で翻訳とフォーマッターを受け取ります。この方法により、サーバーコンポーネントは同期的に保たれ、クライアントコンポーネント内にネストすることが可能になります。
 
@@ -458,9 +473,9 @@ const ServerComponent = ({
 
 > ページやレイアウト内で、`next-intl/server` から `getTranslations` と `getFormatter` を使用して翻訳とフォーマットを事前計算し、それらを props としてサーバーコンポーネントに渡してください。
 
----
+</Step>
 
-### （オプション）ステップ8: コンテンツの言語を変更する
+<Step number={8} title="コンテンツの言語を変更する" isOptional={true}>
 
 next-intl を使ってコンテンツの言語を変更するには、同じパス名を指しながらロケールを切り替えるロケール対応リンクをレンダリングします。プロバイダーが URL を自動的に書き換えるため、現在のルートをターゲットにするだけで済みます。
 
@@ -532,7 +547,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### （オプション）ステップ9：ローカライズされたLinkコンポーネントを使用する
+</Step>
+
+<Step number={9} title="ローカライズされたLinkコンポーネントを使用する" isOptional={true}>
 
 `next-intl`は、アクティブなロケールを自動的に適用するローカライズされたリンクコンポーネントを含むサブパッケージ`next-intl/navigation`を提供しています。これはすでに`@/i18n`ファイルで抽出してあるので、以下のように使用できます。
 
@@ -542,7 +559,9 @@ import { Link } from "@/i18n";
 return <Link href="/about">t("about.title")</Link>;
 ```
 
-### （オプション）ステップ10：Server Actions内でアクティブなロケールにアクセスする
+</Step>
+
+<Step number={10} title="Server Actions内でアクティブなロケールにアクセスする" isOptional={true}>
 
 Server Actionsは`next-intl/server`を使用して現在のロケールを読み取ることができます。これはローカライズされたメールを送信したり、送信されたデータと共に言語設定を保存したりするのに便利です。
 
@@ -565,7 +584,9 @@ export async function handleContactForm(formData: FormData) {
 
 > `getLocale` は `next-intl` プロキシによって設定されたロケールを読み取るため、サーバーのどこでも動作します：ルートハンドラー、サーバーアクション、およびエッジ関数。
 
-### （オプション）ステップ11：メタデータの国際化
+</Step>
+
+<Step number={11} title="メタデータの国際化" isOptional={true}>
 
 コンテンツの翻訳は重要ですが、国際化の主な目的はあなたのウェブサイトを世界により見えるようにすることです。I18nは適切なSEOを通じてウェブサイトの可視性を向上させるための強力な手段です。
 
@@ -605,7 +626,9 @@ export async function generateMetadata({
 // ... ページの残りのコード
 ```
 
-### （オプション）ステップ12：サイトマップの国際化
+</Step>
+
+<Step number={12} title="サイトマップの国際化" isOptional={true}>
 
 すべてのロケールバージョンのページを含むサイトマップを生成します。これにより、検索エンジンがすべての言語バージョンのコンテンツを検出し、インデックス化するのに役立ちます。
 
@@ -659,7 +682,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### （オプション）ステップ13: robots.txtの多言語対応
+</Step>
+
+<Step number={13} title="robots.txtの多言語対応" isOptional={true}>
 
 保護されたルートのすべてのロケールバージョンを適切に処理するrobots.txtファイルを作成します。これにより、検索エンジンが管理者ページやダッシュボードページをどの言語でもインデックスしないようにできます。
 
@@ -692,7 +717,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### （オプション）ステップ14：ロケールルーティングのためのプロキシ設定
+</Step>
+
+<Step number={14} title="ロケールルーティングのためのプロキシ設定" isOptional={true}>
 
 ユーザーの優先ロケールを自動的に検出し、適切なロケールプレフィックス付きURLへリダイレクトするプロキシを作成します。next-intlはこれを自動で処理する便利なプロキシ関数を提供しています。
 
@@ -712,7 +739,9 @@ export const config = {
 };
 ```
 
-### (オプション) ステップ15: ロケール用のTypeScript型を設定する
+</Step>
+
+<Step number={15} title="ロケール用のTypeScript型を設定する" isOptional={true}>
 
 TypeScriptを設定すると、キーのオートコンプリートと型安全性が得られます。
 
@@ -738,7 +767,9 @@ declare module "next-intl" {
 
 このコードはモジュール拡張（Module Augmentation）を使用して、locales と messages を next-intl の AppConfig 型に追加します。
 
-### （オプション）ステップ15: Intlayerを使って翻訳を自動化する
+</Step>
+
+<Step number={16} title="Intlayerを使って翻訳を自動化する" isOptional={true}>
 
 Intlayerは、アプリケーションのローカリゼーションプロセスを支援するために設計された**無料**かつ**オープンソース**のライブラリです。next-intlが翻訳の読み込みと管理を担当する一方で、Intlayerは翻訳ワークフローの自動化を支援します。
 
@@ -763,3 +794,7 @@ Intlayerは以下のことを可能にします：
   Intlayerは、ビジュアルエディターを使用してコンテンツを編集できる無料のビジュアルエディターを提供しています。詳細は[翻訳のビジュアル編集について](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_visual_editor.md)をご覧ください。
 
 その他にも多数の機能があります。Intlayerが提供するすべての機能を知るには、[Intlayerの利点に関するドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/interest_of_intlayer.md)をご参照ください。
+
+</Step>
+
+</Steps>

package/blog/ko/i18n_using_next-i18next.md

@@ -80,6 +80,7 @@ history:
   title="데모 CodeSandbox - Intlayer를 사용하여 애플리케이션 국제화하기"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
+/>
 
 > GitHub에서 [Application Template](https://github.com/aymericzip/next-i18next-template)을 참조하세요.
 
@@ -116,7 +117,9 @@ history:
         └── ServerComponent.tsx
 ```
 
-### 1단계: 의존성 설치
+<Steps>
+
+<Step number={1} title="의존성 설치">
 
 npm을 사용하여 필요한 패키지를 설치합니다:
 
@@ -136,7 +139,9 @@ yarn add i18next react-i18next i18next-resources-to-backend
 - **react-i18next**: 클라이언트 컴포넌트를 위한 `useTranslation` 훅 등을 제공하는 i18next의 React 바인딩입니다.
 - **i18next-resources-to-backend**: 필요한 네임스페이스만 동적으로 로드할 수 있도록 번역 파일의 동적 로딩을 가능하게 하는 플러그인입니다.
 
-### 2단계: 프로젝트 구성
+</Step>
+
+<Step number={2} title="프로젝트 구성">
 
 지원하는 로케일, 기본 로케일, URL 현지화에 대한 헬퍼 함수를 정의하는 구성 파일을 만드세요. 이 파일은 i18n 설정의 단일 진실 소스 역할을 하며 애플리케이션 전반에 걸쳐 타입 안전성을 보장합니다.
 
@@ -189,7 +194,9 @@ export function getCookie(locale: Locale) {
 }
 ```
 
-### 3단계: 번역 네임스페이스 중앙 집중화
+</Step>
+
+<Step number={3} title="번역 네임스페이스 중앙 집중화">
 
 애플리케이션에서 노출하는 모든 네임스페이스에 대해 단일 소스 오브 트루스를 만드세요. 이 목록을 재사용하면 서버, 클라이언트, 툴링 코드가 동기화되고 번역 헬퍼에 대한 강력한 타입 지원이 활성화됩니다.
 
@@ -199,7 +206,9 @@ export const namespaces = ["common", "about"] as const;
 export type Namespace = (typeof namespaces)[number];
 ```
 
-### 4단계: TypeScript로 번역 키 강력한 타입 지정하기
+</Step>
+
+<Step number={4} title="TypeScript로 번역 키 강력한 타입 지정하기">
 
 `i18next`를 확장하여 표준 언어 파일(보통 영어)을 가리키도록 하세요. 그러면 TypeScript가 네임스페이스별 유효한 키를 추론하여 `t()` 호출이 끝까지 검사됩니다.
 
@@ -237,7 +246,9 @@ const { t } = useTranslation("about");
 export type AboutTranslator = TFunction<"about">;
 ```
 
-### 5단계: 서버 사이드 i18n 초기화 설정
+</Step>
+
+<Step number={5} title="서버 사이드 i18n 초기화 설정">
 
 서버 컴포넌트용 번역을 로드하는 서버 사이드 초기화 함수를 만듭니다. 이 함수는 서버 사이드 렌더링을 위해 별도의 i18next 인스턴스를 생성하여 렌더링 전에 번역이 로드되도록 보장합니다.
 
@@ -292,7 +303,9 @@ export async function initI18next(
 }
 ```
 
-### 6단계: 클라이언트 사이드 i18n 프로바이더 생성
+</Step>
+
+<Step number={6} title="클라이언트 사이드 i18n 프로바이더 생성">
 
 애플리케이션을 i18next 컨텍스트로 감싸는 클라이언트 컴포넌트 프로바이더를 생성합니다. 이 프로바이더는 서버에서 미리 로드된 번역을 받아 미번역 콘텐츠 깜빡임(FOUC)을 방지하고 중복 요청을 피합니다.
 
@@ -375,7 +388,9 @@ export default function I18nProvider({
 }
 ```
 
-### 7단계: 동적 로케일 라우트 정의
+</Step>
+
+<Step number={7} title="동적 로케일 라우트 정의">
 
 앱 폴더에 `[locale]` 디렉토리를 생성하여 로케일에 대한 동적 라우팅을 설정합니다. 이를 통해 Next.js는 각 로케일이 URL 세그먼트가 되는 로케일 기반 라우팅을 처리할 수 있습니다 (예: `/en/about`, `/fr/about`).
 
@@ -427,7 +442,9 @@ export default function LocaleLayout({
 }
 ```
 
-### 8단계: 번역 파일 생성하기
+</Step>
+
+<Step number={8} title="번역 파일 생성하기">
 
 각 로케일과 네임스페이스별로 JSON 파일을 생성하세요. 이 구조는 번역을 논리적으로 조직하고 각 페이지에 필요한 번역만 로드할 수 있게 해줍니다.
 
@@ -493,7 +510,9 @@ export default function LocaleLayout({
 }
 ```
 
-### 9단계: 페이지에서 번역 활용하기
+</Step>
+
+<Step number={9} title="페이지에서 번역 활용하기">
 
 서버에서 i18next를 초기화하고 번역을 서버와 클라이언트 컴포넌트 모두에 전달하는 페이지 컴포넌트를 만듭니다. 이렇게 하면 렌더링 전에 번역이 로드되어 콘텐츠 깜빡임을 방지할 수 있습니다.
 
@@ -553,7 +572,9 @@ export default async function AboutPage({
 }
 ```
 
-### 10단계: 클라이언트 컴포넌트에서 번역 사용하기
+</Step>
+
+<Step number={10} title="클라이언트 컴포넌트에서 번역 사용하기">
 
 클라이언트 컴포넌트는 `useTranslation` 훅을 사용하여 번역에 접근할 수 있습니다. 이 훅은 번역 함수와 i18n 인스턴스에 접근할 수 있게 하여, 콘텐츠를 번역하고 로케일 정보를 사용할 수 있도록 합니다.
 
@@ -604,7 +625,9 @@ const ClientComponent = () => {
 export default ClientComponent;
 ```
 
-### 11단계: 서버 컴포넌트에서 번역 사용하기
+</Step>
+
+<Step number={11} title="서버 컴포넌트에서 번역 사용하기">
 
 서버 컴포넌트는 React 훅을 사용할 수 없으므로, 부모 컴포넌트로부터 props를 통해 번역을 전달받습니다. 이 방법은 서버 컴포넌트를 동기적으로 유지하며 클라이언트 컴포넌트 내부에 중첩될 수 있도록 합니다.
 
@@ -650,9 +673,9 @@ const ServerComponent = ({ t, locale, count }: ServerComponentProps) => {
 export default ServerComponent;
 ```
 
----
+</Step>
 
-### (선택 사항) 12단계: 콘텐츠 언어 변경하기
+<Step number={12} title="콘텐츠 언어 변경하기" isOptional={true}>
 
 Next.js에서 콘텐츠의 언어를 변경하는 권장 방법은 로케일 접두사가 붙은 URL과 Next.js 링크를 사용하는 것입니다. 아래 예제는 현재 로케일을 경로에서 읽어와 경로명에서 제거하고, 사용 가능한 각 로케일에 대해 하나의 링크를 렌더링합니다.
 
@@ -724,7 +747,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (선택 사항) 13단계: 지역화된 Link 컴포넌트 만들기
+</Step>
+
+<Step number={13} title="지역화된 Link 컴포넌트 만들기" isOptional={true}>
 
 앱 전반에 걸쳐 지역화된 URL을 재사용하면 내비게이션이 일관되고 SEO 친화적으로 유지됩니다. 내부 경로에는 활성 로케일을 접두사로 붙이고 외부 URL은 그대로 두는 작은 헬퍼로 `next/link`를 감싸세요.
 
@@ -775,7 +800,9 @@ export default function LocalizedLink({
 
 > 팁: `LocalizedLink`는 드롭인 교체이므로, import를 교체하고 컴포넌트가 로케일별 URL을 처리하도록 하여 점진적으로 마이그레이션하세요.
 
-### (선택 사항) 14단계: 서버 액션 내에서 활성 로케일 접근하기
+</Step>
+
+<Step number={14} title="서버 액션 내에서 활성 로케일 접근하기" isOptional={true}>
 
 서버 액션은 종종 이메일, 로깅 또는 서드파티 통합을 위해 현재 로케일이 필요합니다. 프록시가 설정한 로케일 쿠키와 `Accept-Language` 헤더를 결합하여 폴백으로 사용하세요.
 
@@ -813,7 +840,9 @@ export async function stuffFromServer(formData: FormData) {
 
 > 이 헬퍼는 Next.js의 쿠키와 헤더에 의존하기 때문에, Route Handlers, Server Actions 및 기타 서버 전용 컨텍스트에서 작동합니다.
 
-### (선택 사항) 15단계: 메타데이터 국제화하기
+</Step>
+
+<Step number={15} title="메타데이터 국제화하기" isOptional={true}>
 
 콘텐츠 번역도 중요하지만, 국제화의 주요 목표는 여러분의 웹사이트를 전 세계에 더 잘 노출시키는 것입니다. I18n은 적절한 SEO를 통해 웹사이트 가시성을 향상시키는 놀라운 수단입니다.
 
@@ -880,7 +909,9 @@ export default async function AboutPage() {
 }
 ```
 
-### (선택 사항) 16단계: 사이트맵 국제화하기
+</Step>
+
+<Step number={16} title="사이트맵 국제화하기" isOptional={true}>
 
 모든 로케일 버전의 페이지를 포함하는 사이트맵을 생성하세요. 이는 검색 엔진이 모든 언어 버전의 콘텐츠를 발견하고 색인화하는 데 도움을 줍니다.
 
@@ -935,7 +966,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (선택 사항) 17단계: robots.txt 국제화하기
+</Step>
+
+<Step number={17} title="robots.txt 국제화하기" isOptional={true}>
 
 보호된 경로의 모든 로케일 버전을 적절히 처리하는 robots.txt 파일을 만드세요. 이를 통해 검색 엔진이 어떤 언어로든 관리자(admin) 또는 대시보드 페이지를 인덱싱하지 않도록 보장합니다.
 
@@ -966,7 +999,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (선택 사항) 18단계: 로케일 라우팅을 위한 미들웨어 설정
+</Step>
+
+<Step number={18} title="로케일 라우팅을 위한 미들웨어 설정" isOptional={true}>
 
 사용자의 선호 로케일을 자동으로 감지하고 적절한 로케일 접두사가 붙은 URL로 리디렉션하는 프록시를 만듭니다. 이를 통해 사용자는 선호하는 언어로 된 콘텐츠를 볼 수 있어 사용자 경험이 향상됩니다.
 
@@ -1055,7 +1090,9 @@ export const config = {
 };
 ```
 
-### (선택 사항) 19단계: Intlayer를 사용하여 번역 자동화하기
+</Step>
+
+<Step number={19} title="Intlayer를 사용하여 번역 자동화하기" isOptional={true}>
 
 Intlayer는 애플리케이션의 현지화 과정을 지원하기 위해 설계된 **무료**이자 **오픈 소스** 라이브러리입니다. i18next가 번역 로딩과 관리를 담당하는 반면, Intlayer는 번역 워크플로우 자동화를 도와줍니다.
 
@@ -1081,3 +1118,7 @@ Intlayer는 다음을 가능하게 합니다:
   Intlayer는 비주얼 에디터를 사용하여 콘텐츠를 편집할 수 있는 무료 비주얼 에디터를 제공합니다. [번역 비주얼 편집](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_visual_editor.md)에서 자세히 알아보세요.
 
 그리고 더 많은 기능들이 있습니다. Intlayer가 제공하는 모든 기능을 확인하려면 [Intlayer의 장점 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/interest_of_intlayer.md)를 참조하세요.
+
+</Step>
+
+</Steps>