@intlayer/docs 9.4.0-canary.0 → 9.4.0

package/docs/ko/intlayer_with_fastify.md

@@ -222,9 +222,11 @@ import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
   // ... 기타 구성 옵션
-  middleware: {
-    headerName: "my-locale-header",
-    cookieName: "my-locale-cookie",
+  routing: {
+    storage: [
+      { type: "header", name: "my-locale-header" },
+      { type: "cookie", name: "my-locale-cookie" },
+    ],
   },
 };
 

package/docs/ko/intlayer_with_hono.md

@@ -142,6 +142,45 @@ const indexContent = {
 export default indexContent;
 ```
 
+```javascript fileName="src/index.content.cjs" codeFormat="commonjs"
+const { t } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const indexContent = {
+  key: "index",
+  content: {
+    exampleOfContent: t({
+      ko: "영어로 반환된 콘텐츠의 예",
+      en: "Example of returned content in English",
+      fr: "Exemple de contenu renvoyé en français",
+      "es-ES": "Ejemplo de contenido devuelto en español (España)",
+      "es-MX": "Ejemplo de contenido devuelto en español (México)",
+    }),
+  },
+};
+
+module.exports = indexContent;
+```
+
+```json fileName="src/index.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "index",
+  "content": {
+    "exampleOfContent": {
+      "nodeType": "translation",
+      "translation": {
+        "ko": "영어로 반환된 콘텐츠의 예",
+        "en": "Example of returned content in English",
+        "fr": "Exemple de contenu renvoyé en français",
+        "es-ES": "Ejemplo de contenido devuelto en español (España)",
+        "es-MX": "Ejemplo de contenido devuelto en español (México)"
+      }
+    }
+  }
+}
+```
+
 > 콘텐츠 선언은 `contentDir` 디렉토리(기본값: `./src`)에 포함되어 있는 한 애플리케이션의 어디에서나 정의할 수 있습니다. 또한 콘텐츠 선언 파일 확장자(기본값: `.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}`)와 일치해야 합니다.
 
 > 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요.
@@ -197,9 +236,11 @@ import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
   // ... 기타 구성 옵션
-  middleware: {
-    headerName: "my-locale-header",
-    cookieName: "my-locale-cookie",
+  routing: {
+    storage: [
+      { type: "header", name: "my-locale-header" },
+      { type: "cookie", name: "my-locale-cookie" },
+    ],
   },
 };
 

package/docs/ko/intlayer_with_lynx+react.md

@@ -33,6 +33,14 @@ author: aymericzip
 
 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-lynx-template)을 GitHub에서 확인하세요.
 
+<iframe
+  src="https://ide.intlayer.org/aymericzip/intlayer-lynx-template?file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - Intlayer를 사용하여 애플리케이션을 국제화하는 방법"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 ## 대안보다 Intlayer를 선택해야 하는 이유는 무엇입니까?
 
 'react-native-localize' 또는 'i18next'와 같은 주요 솔루션과 비교할 때 Intlayer는 다음과 같은 통합 최적화가 제공되는 솔루션입니다.
@@ -88,6 +96,44 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 <Step number={1} title="의존성 설치">
 
+Lynx 프로젝트에서 다음 패키지를 설치하세요:
+
+```bash packageManager="npm"
+npx intlayer init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive
+```
+
+> `--interactive` 플래그는 선택사항입니다. AI 에이전트인 경우 `intlayer-cli init`을 사용하세요.
+
+> 이 명령은 당신의 환경을 감지하고 필요한 패키지를 설치합니다. 예를 들어:
+
+```bash packageManager="npm"
+npm install intlayer react-intlayer lynx-intlayer
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer react-intlayer lynx-intlayer
+```
+
+```bash packageManager="yarn"
+yarn add intlayer react-intlayer lynx-intlayer
+```
+
+```bash packageManager="bun"
+bun add intlayer react-intlayer lynx-intlayer
+```
+
 ### 패키지
 
 - **intlayer**  
@@ -447,6 +493,11 @@ Intlayer와 함께 개발 경험을 향상시키려면 공식 **Intlayer VS Code
 
 이 확장은 다음 기능을 제공합니다:
 
+- **자동완성** 번역 키용.
+- **실시간 오류 감지** 누락된 번역용.
+- **인라인 미리보기** 번역된 콘텐츠용.
+- **빠른 작업** 번역을 쉽게 생성하고 업데이트하기 위해.
+
 - 번역 키에 대한 **자동 완성**.
 - 누락된 번역에 대한 **실시간 오류 감지**.
 - 번역된 콘텐츠의 **인라인 미리보기**.

package/docs/ko/intlayer_with_nestjs.md

@@ -33,6 +33,20 @@ history:
 
 `express-intlayer`는 Express 애플리케이션을 위한 강력한 국제화(i18n) 미들웨어로, 클라이언트의 선호도에 따라 현지화된 응답을 제공하여 백엔드 서비스를 전 세계적으로 접근 가능하게 만듭니다. NestJS는 Express 위에 구축되었기 때문에, `express-intlayer`를 NestJS 애플리케이션에 원활하게 통합하여 다국어 콘텐츠를 효과적으로 처리할 수 있습니다.
 
+tical Use Cases
+
+- **사용자의 언어로 백엔드 오류 표시**: 오류가 발생하면 사용자의 모국어로 메시지를 표시하면 이해도가 높아지고 좌절감이 줄어듭니다. 이는 toasts 또는 modals과 같은 front-end 컴포넌트에 표시될 수 있는 동적 오류 메시지에 특히 유용합니다.
+
+- **다국어 콘텐츠 검색**: 데이터베이스에서 콘텐츠를 가져오는 애플리케이션의 경우, 국제화를 통해 여러 언어로 콘텐츠를 제공할 수 있습니다. 이는 사용자가 선호하는 언어로 제품 설명, 기사 및 기타 콘텐츠를 표시해야 하는 e-commerce 사이트나 콘텐츠 관리 시스템과 같은 플랫폼에서 매우 중요합니다.
+
+- **다국어 이메일 전송**: 거래 이메일, 마케팅 캠페인 또는 알림이든 관계없이 수신자의 언어로 이메일을 전송하면 참여도와 효과를 크게 높일 수 있습니다.
+
+- **다국어 푸시 알림**: 모바일 애플리케이션의 경우, 사용자가 선호하는 언어로 푸시 알림을 전송하면 상호작용과 사용자 유지율을 높일 수 있습니다. 이러한 개인화된 접근 방식은 알림을 더욱 관련성 있고 실행 가능하게 만들 수 있습니다.
+
+- **기타 통신**: SMS 메시지, 시스템 알림 또는 사용자 인터페이스 업데이트와 같은 백엔드의 모든 형태의 통신은 사용자의 언어로 제공될 때 이점이 있으며, 명확성을 보장하고 전반적인 사용자 경험을 향상시킵니다.
+
+백엔드를 국제화함으로써, 당신의 애플리케이션은 문화적 차이를 존중할 뿐만 아니라 글로벌 시장 요구에 더 잘 부합하게 되어, 전 세계적으로 서비스를 확장하는 핵심 단계가 됩니다.
+
 ## 시작하기
 
 ### 새로운 NestJS 프로젝트 생성
@@ -191,9 +205,11 @@ import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
   // ... 기타 구성 옵션
-  middleware: {
-    headerName: "my-locale-header",
-    cookieName: "my-locale-cookie",
+  routing: {
+    storage: [
+      { type: "header", name: "my-locale-header" },
+      { type: "cookie", name: "my-locale-cookie" },
+    ],
   },
 };
 

package/docs/ko/intlayer_with_nextjs_14.md

@@ -93,12 +93,59 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 ## Next.js 애플리케이션에서 Intlayer 설정 단계별 가이드
 
+<Tabs defaultTab="code">
+  <Tab label="Code" value="code">
+
+<iframe
+  src="https://ide.intlayer.org/aymericzip/intlayer-next-14-template?file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="데모 CodeSandbox - Intlayer를 사용하여 애플리케이션을 국제화하는 방법"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </Tab>
+  <Tab label="Demo" value="demo">
+
+<iframe
+  src="https://intlayer-next-14-template.vercel.app"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="데모 - intlayer-next-14-template"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </Tab>
+</Tabs>
+
+[Application Template](https://github.com/aymericzip/intlayer-next-14-template)을 GitHub에서 확인하세요.
+
 <Steps>
 
 <Step number={1} title="의존성 설치">
 
 npm을 사용하여 필요한 패키지를 설치합니다:
 
+```bash packageManager="npm"
+npx intlayer init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive
+```
+
+> `--interactive` 플래그는 선택사항입니다. AI 에이전트인 경우 `intlayer-cli init`을 사용하세요.
+
+> 이 명령은 당신의 환경을 감지하고 필요한 패키지를 설치합니다. 예를 들어:
+
 ```bash packageManager="npm"
 npm install intlayer next-intlayer
 ```
@@ -195,6 +242,15 @@ export default withIntlayer(nextConfig);
 
 > `withIntlayer()` Next.js 플러그인은 Intlayer를 Next.js와 통합하는 데 사용됩니다. 이 플러그인은 콘텐츠 선언 파일의 빌드를 보장하고 개발 모드에서 이를 모니터링합니다. 또한 [Webpack](https://webpack.js.org/) 또는 [Turbopack](https://nextjs.org/docs/app/api-reference/turbopack) 환경 내에서 Intlayer 환경 변수를 정의합니다. 추가로, 성능 최적화를 위한 별칭(alias)을 제공하며 서버 컴포넌트와의 호환성을 보장합니다.
 
+> `withIntlayer()` 함수는 promise 함수입니다. 다른 플러그인과 함께 사용하려면 await를 사용할 수 있습니다. 예시:
+>
+> ```tsx
+> const nextConfig = await withIntlayer(nextConfig);
+> const nextConfigWithOtherPlugins = withOtherPlugins(nextConfig);
+>
+> export default nextConfigWithOtherPlugins;
+> ```
+
 </Step>
 
 <Step number={4} title="로케일 감지를 위한 미들웨어 구성">
@@ -212,8 +268,25 @@ export const config = {
 
 > `intlayerMiddleware`는 사용자의 선호 로케일을 감지하여 [설정](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)에 지정된 적절한 URL로 리디렉션하는 데 사용됩니다. 또한, 사용자의 선호 로케일을 쿠키에 저장할 수 있도록 합니다.
 
+> Intlayer v9부터, 이 미들웨어는 `routing.enableProxy` 옵션(`true`가 기본값)을 준수합니다. 이 파일을 제거하지 않고 pass-through로 변환하려면 구성에서 `routing.enableProxy: false`를 설정하세요. [v9 릴리스 노트](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/releases/v9.md)를 참조하세요.
+
 > `matcher` 매개변수를 애플리케이션의 라우트에 맞게 조정하세요. 자세한 내용은 [Next.js의 matcher 구성 문서](https://nextjs.org/docs/app/building-your-application/routing/middleware)를 참조하십시오.
 
+> 여러 미들웨어를 함께 체이닝해야 하는 경우(예: 인증 또는 커스텀 미들웨어를 포함한 `intlayerMiddleware`), Intlayer는 이제 `multipleMiddlewares`라는 헬퍼를 제공합니다.
+
+```ts
+import {
+  multipleMiddlewares,
+  intlayerMiddleware,
+} from "next-intlayer/middleware";
+import { customMiddleware } from "@utils/customMiddleware";
+
+export const middleware = multipleMiddlewares([
+  intlayerMiddleware,
+  customMiddleware,
+]);
+```
+
 </Step>
 
 <Step number={5} title="동적 로케일 라우트 정의">
@@ -233,11 +306,38 @@ export default RootLayout;
 
 동적 라우팅을 구현하려면 `[locale]` 디렉토리에 새 레이아웃을 추가하여 로케일 경로를 제공하세요:
 
+<Tabs>
+ <Tab label='Intlayer >=9.4' value='>=9.4'>
+
 ```tsx fileName="src/app/[locale]/layout.tsx" codeFormat={["typescript", "esm"]}
-import {
-  type Next14LayoutIntlayer,
-  IntlayerClientProvider,
-} from "next-intlayer";
+import { type Next14LayoutIntlayer } from "next-intlayer";
+import { IntlayerProvider } from "next-intlayer/server";
+import { Inter } from "next/font/google";
+import { getHTMLTextDir } from "intlayer";
+
+const inter = Inter({ subsets: ["latin"] });
+
+const LocaleLayout: Next14LayoutIntlayer = ({
+  children,
+  params: { locale },
+}) => (
+  <IntlayerProvider locale={locale}>
+    <html lang={locale} dir={getHTMLTextDir(locale)}>
+      <body className={inter.className}>{children}</body>
+    </html>
+  </IntlayerProvider>
+);
+
+export default LocaleLayout;
+```
+
+> 단일 `IntlayerProvider`는 트리의 두 부분을 모두 처리합니다: 서버 훅에서 읽는 요청 범위의 서버 컨텍스트를 시드하고, 클라이언트 컴포넌트가 동일한 로케일을 받도록 클라이언트 제공자를 마운트합니다.
+
+ </Tab>
+ <Tab label='Intlayer <9.4' value='<9.4'>
+
+```tsx fileName="src/app/[locale]/layout.tsx" codeFormat={["typescript", "esm"]}
+import { type Next14LayoutIntlayer, IntlayerProvider } from "next-intlayer";
 import { Inter } from "next/font/google";
 import { getHTMLTextDir } from "intlayer";
 
@@ -249,9 +349,7 @@ const LocaleLayout: Next14LayoutIntlayer = ({
 }) => (
   <html lang={locale} dir={getHTMLTextDir(locale)}>
     <body className={inter.className}>
-      <IntlayerClientProvider locale={locale}>
-        {children}
-      </IntlayerClientProvider>
+      <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
     </body>
   </html>
 );
@@ -259,6 +357,9 @@ const LocaleLayout: Next14LayoutIntlayer = ({
 export default LocaleLayout;
 ```
 
+ </Tab>
+</Tabs>
+
 > `[locale]` 경로 세그먼트는 로케일을 정의하는 데 사용됩니다. 예: `/en-US/about`는 `en-US`를, `/fr/about`는 `fr`를 가리킵니다.
 
 > 이 단계에서 `Error: Missing <html> and <body> tags in the root layout.` 오류가 발생할 수 있습니다. 이는 `/app/page.tsx` 파일이 더 이상 사용되지 않으며 제거할 수 있기 때문에 예상되는 현상입니다. 대신 `[locale]` 경로 세그먼트가 `/app/[locale]/page.tsx` 페이지를 활성화합니다. 따라서 브라우저에서 `/en`, `/fr`, `/es`와 같은 경로를 통해 페이지에 접근할 수 있습니다. 기본 로케일을 루트 페이지로 설정하려면 4단계의 `middleware` 설정을 참고하세요.
@@ -341,6 +442,40 @@ export default pageContent;
 
 애플리케이션 전반에서 콘텐츠 사전을 접근하세요:
 
+<Tabs>
+ <Tab label='Intlayer >=9.4' value='>=9.4'>
+
+```tsx fileName="src/app/[locale]/page.tsx" codeFormat={["typescript", "esm"]}
+import { ClientComponentExample } from "@components/ClientComponentExample";
+import { ServerComponentExample } from "@components/ServerComponentExample";
+import { type Next14PageIntlayer } from "next-intlayer";
+import { useIntlayer } from "next-intlayer";
+
+const Page: Next14PageIntlayer = ({ params: { locale } }) => {
+  const content = useIntlayer("page", locale);
+
+  return (
+    <>
+      <p>
+        {content.getStarted.main}
+        <code>{content.getStarted.pageLink}</code>
+      </p>
+
+      <ServerComponentExample />
+      <ClientComponentExample />
+    </>
+  );
+};
+
+export default Page;
+```
+
+- **`IntlayerProvider`**는 locale 레이아웃에 한 번 마운트됩니다. 서버 및 클라이언트 컴포넌트 모두에 locale을 제공하므로 페이지가 더 이상 자신을 래핑하지 않습니다.
+- 서버 hooks는 이 순서대로 locale을 해결합니다: 호출 사이트에서 전달된 locale, provider에 의해 시드된 서버 컨텍스트, 요청에 의해 전달된 locale(`Intlayer` proxy에 의해 설정된 `x-intlayer-locale` 헤더, 그 다음 locale 쿠키). 마지막 단계는 클라이언트 측 네비게이션에서 페이지 세그먼트만 다시 렌더링할 때 콘텐츠가 올바르게 유지되도록 하는 것입니다. 이때 레이아웃(및 provider)은 다시 실행되지 않습니다.
+
+ </Tab>
+ <Tab label='Intlayer <9.4' value='<9.4'>
+
 ```tsx fileName="src/app/[locale]/page.tsx" codeFormat={["typescript", "esm"]}
 import { ClientComponentExample } from "@components/ClientComponentExample";
 import { ServerComponentExample } from "@components/ServerComponentExample";
@@ -373,6 +508,9 @@ export default Page;
 
 > 레이아웃과 페이지는 공통 서버 컨텍스트를 공유할 수 없습니다. 서버 컨텍스트 시스템이 요청별 데이터 저장소([React의 캐시](https://react.dev/reference/react/cache) 메커니즘)를 기반으로 하기 때문에 애플리케이션의 서로 다른 세그먼트마다 각 “컨텍스트”가 다시 생성됩니다. 프로바이더를 공유 레이아웃에 배치하면 이러한 격리가 깨져 서버 컴포넌트에 서버 컨텍스트 값이 올바르게 전파되지 않습니다.
 
+ </Tab>
+</Tabs>
+
 ```tsx {4,7} fileName="src/components/ClientComponentExample.tsx" codeFormat={["typescript", "esm"]}
 "use client";
 
@@ -391,6 +529,30 @@ const ClientComponentExample: FC = () => {
 };
 ```
 
+<Tabs>
+ <Tab label='Intlayer >=9.4' value='>=9.4'>
+
+```tsx {2} fileName="src/components/ServerComponentExample.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+const ServerComponentExample: FC = () => {
+  const content = useIntlayer("server-component-example"); // 관련 콘텐츠 선언 생성
+
+  return (
+    <div>
+      <h2>{content.title}</h2>
+      <p>{content.content}</p>
+    </div>
+  );
+};
+```
+
+> `next-intlayer`는 isomorphic import path입니다: `react-server` export 조건은 서버 컴포넌트에 ambient-locale 구현을 제공하고, 클라이언트 컴포넌트는 context-backed 구현을 받습니다. 동일한 호출이 양쪽에서 작동합니다.
+
+ </Tab>
+ <Tab label='Intlayer <9.4' value='<9.4'>
+
 ```tsx {2} fileName="src/components/ServerComponentExample.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useIntlayer } from "next-intlayer/server";
@@ -407,6 +569,9 @@ const ServerComponentExample: FC = () => {
 };
 ```
 
+ </Tab>
+</Tabs>
+
 > 콘텐츠를 `alt`, `title`, `href`, `aria-label` 등과 같은 `string` 속성에서 사용하려면, 함수의 값을 호출해야 합니다. 예를 들어:
 
 > ```html
@@ -553,47 +718,6 @@ export const generateMetadata = ({ params: { locale } }) => {
 // ... 나머지 코드
 ````
 
-````javascript fileName="src/app/[locale]/layout.cjs or src/app/[locale]/page.cjs" codeFormat="commonjs"
-const { getIntlayer, getMultilingualUrls } = require("intlayer");
-
-const generateMetadata = ({ params: { locale } }) => {
-  const metadata = getIntlayer("page-metadata", locale);
-
-  /**
-   * 각 로케일에 대한 모든 URL을 포함하는 객체를 생성합니다.
-   *
-   * 예시:
-   * ```ts
-   *  getMultilingualUrls('/about');
-   *
-   *  // 반환값
-   *  // {
-   *  //   en: '/about',
-   *  //   fr: '/fr/about',
-   *  //   es: '/es/about'
-   *  // }
-   * ```
-   */
-  const multilingualUrls = getMultilingualUrls("/");
-  const localizedUrl = multilingualUrls[locale];
-
-  return {
-    ...metadata,
-    alternates: {
-      canonical: localizedUrl,
-      languages: { ...multilingualUrls, "x-default": "/" },
-    },
-    openGraph: {
-      url: localizedUrl,
-    },
-  };
-};
-
-module.exports = { generateMetadata };
-
-// ... 나머지 코드
-````
-
 > `next-intlayer`에서 가져온 `getIntlayer` 함수는 콘텐츠를 `IntlayerNode`로 감싸서 반환하므로 시각적 편집기와의 통합이 가능합니다. 반면, `intlayer`에서 가져온 `getIntlayer` 함수는 추가 속성 없이 콘텐츠를 직접 반환합니다.
 
 또는 `getTranslation` 함수를 사용하여 메타데이터를 선언할 수도 있습니다. 하지만 메타데이터 번역을 자동화하고 콘텐츠를 외부화하려면 콘텐츠 선언 파일을 사용하는 것이 권장됩니다.
@@ -860,6 +984,33 @@ Link.displayName = "Link";
 
 <Step number={12} title="번들 크기 최적화" isOptional={true}>
 
+Server Action 내에서 활성 locale이 필요한 경우(예: 이메일 로컬라이제이션 또는 locale 인식 로직 실행), `next-intlayer/server`에서 `getLocale`을 호출하세요:
+
+```tsx fileName="src/app/actions/getLocale.ts" codeFormat="typescript"
+"use server";
+
+import { getLocale } from "next-intlayer/server";
+
+export const myServerAction = async () => {
+  const locale = await getLocale();
+
+  // locale로 뭔가를 수행합니다
+};
+```
+
+> `getLocale` 함수는 사용자의 로케일을 결정하기 위해 캐스케이딩 전략을 따릅니다:
+>
+> 1. 먼저 미들웨어에 의해 설정되었을 수 있는 로케일 값에 대해 요청 헤더를 확인합니다
+> 2. 헤더에서 로케일을 찾을 수 없으면 쿠키에 저장된 로케일을 찾습니다
+> 3. 쿠키를 찾을 수 없으면 브라우저 설정에서 사용자의 선호 언어를 감지하려고 시도합니다
+> 4. 마지막 수단으로 애플리케이션의 구성된 기본 로케일로 폴백합니다
+>
+> 이는 사용 가능한 컨텍스트를 기반으로 가장 적절한 로케일이 선택되도록 보장합니다.
+
+</Step>
+
+<Step number={13} title="번들 크기 최적화" isOptional={true}>
+
 `next-intlayer`를 사용할 때, 기본적으로 모든 페이지 번들에 사전이 포함됩니다. 번들 크기를 최적화하기 위해 Intlayer는 매크로를 사용하여 `useIntlayer` 호출을 지능적으로 대체하는 선택적 SWC 플러그인을 제공합니다. 이를 통해 실제로 사전을 사용하는 페이지의 번들에만 사전이 포함되도록 보장합니다.
 
 이 최적화를 활성화하려면 `@intlayer/swc` 패키지를 설치하세요. 설치가 완료되면 `next-intlayer`가 자동으로 플러그인을 감지하고 사용합니다:
@@ -934,8 +1085,6 @@ Intlayer와 함께 개발 경험을 향상시키기 위해 공식 **Intlayer VS
 
 확장 기능 사용 방법에 대한 자세한 내용은 [Intlayer VS Code 확장 문서](https://intlayer.org/doc/vs-code-extension)를 참조하세요.
 
----
-
 ### 더 나아가기
 
 더 나아가려면 [비주얼 에디터](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_visual_editor.md)를 구현하거나 [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_CMS.md)를 사용하여 콘텐츠를 외부화할 수 있습니다.