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

package/docs/ko/intlayer_with_astro_vue.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Vue i18n - 앱을 번역하는 완전 가이드"
 description: "i18next는 이제 그만. 2026년 다국어 (i18n) Astro + Vue 앱 구축 가이드. AI 에이전트로 번역하고 번들 크기, SEO, 성능을 최적화하세요."
 keywords:

package/docs/ko/intlayer_with_create_react_app.md

@@ -620,20 +620,6 @@ Intlayer와 함께 개발 경험을 향상시키려면 공식 **Intlayer VS Code
 
 확장 기능 사용 방법에 대한 자세한 내용은 [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)를 사용하여 콘텐츠를 외부화할 수 있습니다.
-[VS Code 마켓플레이스에서 설치하기](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-이 확장 기능은 다음을 제공합니다:
-
-- 번역 키에 대한 **자동 완성**.
-- 누락된 번역에 대한 **실시간 오류 감지**.
-- 번역된 내용을 보여주는 **인라인 미리보기**.
-- 번역을 쉽게 생성하고 업데이트할 수 있는 **빠른 작업**.
-
-확장 기능 사용 방법에 대한 자세한 내용은 [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)를 사용하여 콘텐츠를 외부화할 수 있습니다.

package/docs/ko/intlayer_with_express.md

@@ -32,10 +32,6 @@ author: aymericzip
 
 `express-intlayer`는 Express 애플리케이션을 위한 강력한 국제화(i18n) 미들웨어로, 클라이언트의 선호도에 따라 로컬화된 응답을 제공하여 백엔드 서비스를 전 세계적으로 접근 가능하게 만듭니다.
 
-## 왜 백엔드를 국제화해야 할까요?
-
-백엔드를 국제화하는 것은 글로벌 사용자에게 효과적으로 서비스를 제공하기 위해 필수적입니다. 이를 통해 애플리케이션은 각 사용자의 선호 언어로 콘텐츠와 메시지를 전달할 수 있습니다. 이러한 기능은 사용자 경험을 향상시키고, 애플리케이션을 다양한 언어적 배경을 가진 사람들에게 더 접근 가능하고 관련성 있게 만들어 애플리케이션의 도달 범위를 넓힙니다.
-
 ### 실질적인 사용 사례
 
 - **사용자 언어로 백엔드 오류 표시**: 오류가 발생했을 때, 사용자의 모국어로 메시지를 표시하면 이해도를 높이고 좌절감을 줄일 수 있습니다. 이는 토스트나 모달과 같은 프론트엔드 구성 요소에 표시될 수 있는 동적 오류 메시지에 특히 유용합니다.
@@ -253,25 +249,6 @@ export default config;
 }
 ```
 
-### VS Code 확장 기능
-
-Intlayer와 함께 개발 경험을 향상시키기 위해 공식 **Intlayer VS Code 확장 기능**을 설치할 수 있습니다.
-
-[VS Code 마켓플레이스에서 설치하기](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-이 확장 기능은 다음을 제공합니다:
-
-- 번역 키에 대한 **자동 완성**.
-- 누락된 번역에 대한 **실시간 오류 감지**.
-- 번역된 콘텐츠의 **인라인 미리보기**.
-- 번역을 쉽게 생성하고 업데이트할 수 있는 **빠른 작업**.
-
-확장 기능 사용 방법에 대한 자세한 내용은 [Intlayer VS Code 확장 기능 문서](https://intlayer.org/doc/vs-code-extension)를 참조하세요.
-
-### Git 구성
-
-Intlayer가 생성한 파일은 무시하는 것이 권장됩니다. 이렇게 하면 Git 저장소에 해당 파일을 커밋하는 것을 방지할 수 있습니다.
-
 ### VS 코드 확장
 
 Intlayer와 함께 개발 경험을 향상시키기 위해 공식 **Intlayer VS 코드 확장**을 설치할 수 있습니다.

package/docs/ko/intlayer_with_lynx+react.md

@@ -84,130 +84,6 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 ---
 
-## 1단계: 종속성 설치
-
-Lynx 프로젝트에서 다음 패키지를 설치하세요:
-
-```bash packageManager="npm"
-npx intlayer-cli init --interactive
-```
-
-```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
-```
-
-```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
-```
-
-```bash packageManager="bun"
-bunx intlayer-cli 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**  
-  구성, 사전 콘텐츠, 타입 생성 및 CLI 명령어를 위한 핵심 i18n 도구입니다.
-
-- **react-intlayer**  
-  Lynx에서 로케일을 가져오고 전환하는 데 사용할 컨텍스트 제공자 및 React 훅을 제공하는 React 통합입니다.
-
-- **lynx-intlayer**  
-  Lynx 번들러와 Intlayer를 통합하기 위한 플러그인을 제공하는 Lynx 통합입니다.
-
----
-
-## 2단계: Intlayer 구성 파일 생성
-
-프로젝트 루트(또는 편리한 위치)에 **Intlayer 구성** 파일을 생성하세요. 다음과 같이 보일 수 있습니다:
-
-```ts fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import { Locales, type IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // ... 필요한 다른 로케일 추가
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-export default config;
-```
-
-이 구성 파일에서 다음을 수행할 수 있습니다:
-
-- **지원되는 로케일 목록**을 구성합니다.
-- **기본 로케일**을 설정합니다.
-- 나중에 더 고급 옵션(예: 로그, 사용자 지정 콘텐츠 디렉토리 등)을 추가할 수 있습니다.
-- 자세한 내용은 [Intlayer 구성 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
-
-## 3단계: Lynx 번들러에 Intlayer 플러그인 추가
-
-Lynx에서 Intlayer를 사용하려면 `lynx.config.ts` 파일에 플러그인을 추가해야 합니다:
-
-```ts fileName="lynx.config.ts"
-import { defineConfig } from "@lynx-js/rspeedy";
-import { pluginIntlayerLynx } from "lynx-intlayer/plugin";
-
-export default defineConfig({
-  plugins: [
-    // ... 다른 플러그인
-    pluginIntlayerLynx(),
-  ],
-});
-```
-
-## 4단계: Intlayer 제공자 추가
-
-애플리케이션 전반에서 사용자 언어를 동기화하려면 `react-intlayer`의 `IntlayerProvider` 컴포넌트로 루트 컴포넌트를 감싸야 합니다.
-
-또한, Intlayer가 제대로 작동할 수 있도록 `intlayerPolyfill` 함수 파일을 추가해야 합니다.
-
-```tsx fileName="src/index.tsx"
-import { root } from "@lynx-js/react";
-
-import { App } from "./App.js";
-import { IntlayerProvider } from "react-intlayer";
-import { intlayerPolyfill } from "lynx-intlayer";
-
-intlayerPolyfill();
-
-root.render(
-  <IntlayerProvider>
-    <App />
-  </IntlayerProvider>
-);
-
-if (import.meta.webpackHot) {
-  import.meta.webpackHot.accept();
-}
-```
-
 ## 5단계: 콘텐츠 선언
 
 프로젝트 내 어디에서나 **콘텐츠 선언** 파일을 생성하세요(일반적으로 `src/` 내). Intlayer가 지원하는 확장 형식을 사용할 수 있습니다:

package/docs/ko/intlayer_with_nestjs.md

@@ -33,24 +33,6 @@ history:
 
 `express-intlayer`는 Express 애플리케이션을 위한 강력한 국제화(i18n) 미들웨어로, 클라이언트의 선호도에 따라 현지화된 응답을 제공하여 백엔드 서비스를 전 세계적으로 접근 가능하게 만듭니다. NestJS는 Express 위에 구축되었기 때문에, `express-intlayer`를 NestJS 애플리케이션에 원활하게 통합하여 다국어 콘텐츠를 효과적으로 처리할 수 있습니다.
 
-## 백엔드를 국제화해야 하는 이유
-
-백엔드를 국제화하는 것은 전 세계 사용자를 효과적으로 서비스하기 위해 필수적입니다. 이를 통해 애플리케이션은 각 사용자가 선호하는 언어로 콘텐츠와 메시지를 전달할 수 있습니다. 이러한 기능은 사용자 경험을 향상시키고, 다양한 언어 배경을 가진 사람들에게 더 접근 가능하고 관련성 높은 애플리케이션으로 만들어 애플리케이션의 범위를 넓힙니다.
-
-### 실용적인 사용 사례
-
-- **사용자 언어로 백엔드 오류 표시**: 오류가 발생할 때, 사용자의 모국어로 메시지를 표시하면 이해도를 높이고 불만을 줄일 수 있습니다. 이는 특히 토스트나 모달과 같은 프론트엔드 컴포넌트에 동적으로 표시되는 오류 메시지에 유용합니다.
-
-- **다국어 콘텐츠 조회**: 데이터베이스에서 콘텐츠를 가져오는 애플리케이션의 경우, 국제화를 통해 여러 언어로 콘텐츠를 제공할 수 있습니다. 이는 전자상거래 사이트나 콘텐츠 관리 시스템과 같이 사용자 선호 언어로 제품 설명, 기사 및 기타 콘텐츠를 표시해야 하는 플랫폼에 매우 중요합니다.
-
-- **다국어 이메일 전송**: 거래 이메일, 마케팅 캠페인 또는 알림 등 수신자의 언어로 이메일을 보내면 참여도와 효과를 크게 높일 수 있습니다.
-
-- **다국어 푸시 알림**: 모바일 애플리케이션에서는 사용자가 선호하는 언어로 푸시 알림을 보내면 상호작용과 유지율을 향상시킬 수 있습니다. 이러한 개인화된 접근은 알림을 더 관련성 있고 실행 가능하게 만듭니다.
-
-- **기타 커뮤니케이션**: 백엔드에서 보내는 모든 형태의 커뮤니케이션(예: SMS 메시지, 시스템 경고, 사용자 인터페이스 업데이트)은 사용자의 언어로 제공되어 명확성을 보장하고 전반적인 사용자 경험을 향상시킵니다.
-
-백엔드를 국제화함으로써, 귀하의 애플리케이션은 문화적 차이를 존중할 뿐만 아니라 글로벌 시장의 요구에 더 잘 부합하게 되어, 전 세계적으로 서비스를 확장하는 데 중요한 단계가 됩니다.
-
 ## 시작하기
 
 ### 새로운 NestJS 프로젝트 생성

package/docs/ko/intlayer_with_nextjs_14.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-06
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js 14 i18n - 앱을 번역하는 완전 가이드"
 description: "i18next는 이제 그만. 2026년 다국어 (i18n) Next.js 14 앱 구축 가이드. AI 에이전트로 번역하고 번들 크기, SEO, 성능을 최적화하세요."
 keywords:
@@ -59,6 +59,10 @@ author: aymericzip
 
 GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-next-14-template)을 확인하세요.
 
+## 목차
+
+<TOC/>
+
 ## 대안보다 Intlayer를 선택해야 하는 이유는 무엇입니까?
 
 'next-intl' 또는 'i18next'와 같은 주요 솔루션과 비교할 때 Intlayer는 다음과 같은 통합 최적화 기능을 제공하는 솔루션입니다.
@@ -925,37 +929,39 @@ TypeScript 구성에 자동 생성된 타입이 포함되어 있는지 확인하
 {
   // ... 기존 TypeScript 구성
   "include": [
-    // ... 기존 TypeScript 구성
+    // ... 기존 TypeScript 설정
     ".intlayer/**/*.ts", // 자동 생성된 타입 포함
   ],
 }
 ```
 
-### Git 구성
+### Git 설정
 
-Intlayer에서 생성된 파일은 무시하는 것이 권장됩니다. 이렇게 하면 Git 저장소에 해당 파일들이 커밋되는 것을 방지할 수 있습니다.
+Intlayer가 생성한 파일들은 Git 저장소에 커밋하지 않도록 무시하는 것이 권장됩니다.
 
-이를 위해 `.gitignore` 파일에 다음 지침을 추가할 수 있습니다:
+이를 위해 `.gitignore` 파일에 다음 지시문을 추가할 수 있습니다:
 
 ```plaintext fileName=".gitignore"
-# Intlayer에서 생성된 파일 무시
+# Intlayer가 생성한 파일 무시
 .intlayer
 ```
 
-### VS 코드 확장
+### VS Code 확장
 
-Intlayer와 함께 개발 경험을 향상시키기 위해 공식 **Intlayer VS 코드 확장**을 설치할 수 있습니다.
+Intlayer와 함께 개발 경험을 향상시키기 위해 공식 **Intlayer VS Code 확장**을 설치할 수 있습니다.
 
-[VS 코드 마켓플레이스에서 설치하기](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+[VS Code 마켓플레이스에서 설치하기](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
 이 확장은 다음 기능을 제공합니다:
 
 - 번역 키에 대한 **자동 완성**.
-- 누락된 번역에 대한 **실시간 오류 감지**.
-- 번역된 내용을 **인라인 미리보기**.
-- 번역을 쉽게 생성하고 업데이트할 수 있는 **빠른 작업**.
+- **실시간 오류 감지**로 누락된 번역을 확인할 수 있습니다.
+- **인라인 미리보기**로 번역된 내용을 바로 확인할 수 있습니다.
+- **빠른 작업**으로 번역을 쉽게 생성하고 업데이트할 수 있습니다.
 
-확장 프로그램 사용 방법에 대한 자세한 내용은 [Intlayer VS Code 확장 문서](https://intlayer.org/doc/vs-code-extension)를 참조하세요.
+확장 기능 사용 방법에 대한 자세한 내용은 [Intlayer VS Code 확장 문서](https://intlayer.org/doc/vs-code-extension)를 참조하세요.
+
+---
 
 ### 더 나아가기
 

package/docs/ko/intlayer_with_nextjs_15.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-06
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js 15 i18n - 앱을 번역하는 완전 가이드"
 description: "i18next는 이제 그만. 2026년 다국어 (i18n) Next.js 15 앱 구축 가이드. AI 에이전트로 번역하고 번들 크기, SEO, 성능을 최적화하세요."
 keywords:
@@ -65,6 +65,10 @@ author: aymericzip
 
 GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-next-15-template)을 확인하세요.
 
+## 목차
+
+<TOC/>
+
 ## 대안보다 Intlayer를 선택해야 하는 이유는 무엇입니까?
 
 'next-intl' 또는 'i18next'와 같은 주요 솔루션과 비교할 때 Intlayer는 다음과 같은 통합 최적화 기능을 제공하는 솔루션입니다.
@@ -881,6 +885,22 @@ bun add @intlayer/swc --dev
 
 </Steps>
 
+### Turbopack에서 사전 변경 사항 감시
+
+`next dev --turbopack` 명령을 사용하여 개발 서버로 Turbopack을 사용할 때, 기본적으로 사전 변경 사항이 자동으로 감지되지 않습니다.
+
+이 제한은 Turbopack이 콘텐츠 파일의 변경 사항을 모니터링하기 위해 webpack 플러그인을 병렬로 실행할 수 없기 때문에 발생합니다. 이 문제를 해결하려면 `intlayer watch` 명령을 사용하여 개발 서버와 Intlayer 빌드 감시자를 동시에 실행해야 합니다.
+
+```json5 fileName="package.json"
+{
+  // ... 기존 package.json 구성
+  "scripts": {
+    // ... 기존 스크립트 구성
+    "dev": "intlayer watch --with 'next dev --turbopack'",
+  },
+}
+```
+
 ### TypeScript 구성
 
 Intlayer는 모듈 증강(module augmentation)을 사용하여 TypeScript의 이점을 활용하고 코드베이스를 더욱 견고하게 만듭니다.

package/docs/ko/intlayer_with_nextjs_16.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-06
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js 16 i18n - 앱을 번역하는 완전 가이드"
 description: "i18next는 이제 그만. 2026년 다국어 (i18n) Next.js 16 앱 구축 가이드. AI 에이전트로 번역하고 번들 크기, SEO, 성능을 최적화하세요."
 keywords:
@@ -804,11 +804,132 @@ return (
 
 </Step>
 
-</Steps>
+<Step number={11} title="지역화된 링크 컴포넌트 생성하기" isOptional={true}>
 
-<Steps>
+애플리케이션의 내비게이션이 현재 로케일을 준수하도록 하려면, 커스텀 `Link` 컴포넌트를 만들 수 있습니다. 이 컴포넌트는 내부 URL에 현재 언어를 자동으로 접두사로 붙여줍니다. 예를 들어, 프랑스어 사용자가 "About" 페이지로 가는 링크를 클릭하면 `/about` 대신 `/fr/about`로 리디렉션됩니다.
+
+이 동작은 여러 가지 이유로 유용합니다:
+
+- **SEO 및 사용자 경험**: 로컬라이즈된 URL은 검색 엔진이 언어별 페이지를 올바르게 색인하도록 도와주며, 사용자에게 선호하는 언어로 된 콘텐츠를 제공합니다.
+- **일관성**: 애플리케이션 전반에 걸쳐 로컬라이즈된 링크를 사용함으로써 내비게이션이 현재 로케일 내에서 유지되어 예상치 못한 언어 전환을 방지합니다.
+- **유지보수성**: 로컬라이제이션 로직을 단일 컴포넌트에 중앙 집중화하면 URL 관리를 단순화하여 애플리케이션이 성장함에 따라 코드베이스를 더 쉽게 유지보수하고 확장할 수 있습니다.
+
+아래는 TypeScript로 구현한 로컬라이즈된 `Link` 컴포넌트입니다:
+
+```tsx fileName="src/components/Link.tsx" codeFormat={["typescript", "esm"]}
+"use client";
+
+import { getLocalizedUrl } from "intlayer";
+import NextLink, { type LinkProps as NextLinkProps } from "next/link";
+import { useLocale } from "next-intlayer";
+import type { PropsWithChildren, FC } from "react";
+
+/**
+ * 주어진 URL이 외부 링크인지 확인하는 유틸리티 함수입니다.
+ * URL이 http:// 또는 https://로 시작하면 외부 링크로 간주합니다.
+ */
+export const checkIsExternalLink = (href?: string): boolean =>
+  /^https?:\/\//.test(href ?? "");
+
+/**
+ * 현재 로케일에 따라 href 속성을 조정하는 커스텀 Link 컴포넌트입니다.
+ * 내부 링크의 경우, `getLocalizedUrl`을 사용하여 URL 앞에 로케일을 붙입니다 (예: /fr/about).
+ * 이를 통해 내비게이션이 동일한 로케일 컨텍스트 내에서 이루어지도록 보장합니다.
+ */
+export const Link: FC<PropsWithChildren<NextLinkProps>> = ({
+  href,
+  children,
+  ...props
+}) => {
+  const { locale } = useLocale();
+  const isExternalLink = checkIsExternalLink(href.toString());
+
+  // 만약 링크가 내부 링크이고 유효한 href가 제공되었다면, 지역화된 URL을 가져옵니다.
+  const hrefI18n: NextLinkProps["href"] =
+    href && !isExternalLink ? getLocalizedUrl(href.toString(), locale) : href;
+
+  return (
+    <NextLink href={hrefI18n} {...props}>
+      {children}
+    </NextLink>
+  );
+};
+```
+
+#### 작동 원리
+
+- **외부 링크 감지**:  
+  유틸리티 함수 `checkIsExternalLink`는 URL이 외부 링크인지 확인합니다. 외부 링크는 현지화가 필요하지 않으므로 변경되지 않은 상태로 유지됩니다.
+
+- **현재 로케일 가져오기**:  
+  `useLocale` 훅은 현재 로케일(예: 프랑스어의 경우 `fr`)을 제공합니다.
+
+- **URL 현지화**:  
+  내부 링크(즉, 외부 링크가 아닌 링크)의 경우, `getLocalizedUrl`을 사용하여 URL 앞에 현재 로케일을 자동으로 붙입니다. 즉, 사용자가 프랑스어 환경에 있는 경우, `href`로 `/about`을 전달하면 `/fr/about`으로 변환됩니다.
+
+- **링크 반환**:  
+  컴포넌트는 현지화된 URL을 가진 `<a>` 요소를 반환하여 내비게이션이 로케일과 일치하도록 보장합니다.
+
+이 `Link` 컴포넌트를 애플리케이션 전반에 통합함으로써, 일관성 있고 언어를 인식하는 사용자 경험을 유지하는 동시에 향상된 SEO 및 사용성 이점을 누릴 수 있습니다.
+
+</Step>
+
+<Step number={12} title="Server Actions에서 현재 로케일 가져오기" isOptional={true}>
+
+Server Action 내부에서 활성 로케일이 필요한 경우(예: 이메일 현지화 또는 로케일 인식 로직 실행), `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();
+
+  // 로케일을 사용한 작업 수행
+};
+```
+
+> `getLocale` 함수는 사용자의 로케일을 결정하기 위해 계단식 전략을 따릅니다:
+>
+> 1. 먼저, 프록시에 의해 설정되었을 수 있는 로케일 값을 요청 헤더에서 확인합니다
+> 2. 헤더에서 로케일을 찾을 수 없으면 쿠키에 저장된 로케일을 찾습니다
+> 3. 쿠키가 발견되지 않으면 브라우저 설정에서 사용자가 선호하는 언어 감지를 시도합니다
+> 4. 마지막 수단으로 애플리케이션의 구성된 기본 로케일로 대체됩니다
+>
+> 이는 사용 가능한 컨텍스트를 기반으로 가장 적절한 로케일이 선택되도록 합니다.
+
+</Step>
+
+<Step number={13} title="번들 크기 최적화" isOptional={true}>
 
-<Step number={1} title="컴포넌트 콘텐츠 추출" isOptional={true}>
+`next-intlayer`를 사용할 때, 사전(dictionary)은 기본적으로 모든 페이지의 번들에 포함됩니다. 번들 크기를 최적화하기 위해 Intlayer는 매크로를 사용하여 `useIntlayer` 호출을 지능적으로 대체하는 선택적 SWC 플러그인을 제공합니다. 이를 통해 사전은 실제로 사용하는 페이지의 번들에만 포함됩니다.
+
+이 최적화를 활성화하려면 `@intlayer/swc` 패키지를 설치하세요. 설치가 완료되면 `next-intlayer`가 자동으로 플러그인을 감지하고 사용합니다:
+
+```bash packageManager="npm"
+npm install @intlayer/swc --save-dev
+```
+
+```bash packageManager="pnpm"
+pnpm add @intlayer/swc --save-dev
+```
+
+```bash packageManager="yarn"
+yarn add @intlayer/swc --save-dev
+```
+
+```bash packageManager="bun"
+bun add @intlayer/swc --dev
+```
+
+> 참고: 이 최적화는 Next.js 13 이상에서만 사용할 수 있습니다.
+
+> 참고: 이 패키지는 SWC 플러그인이 Next.js에서 아직 실험적이기 때문에 기본적으로 설치되지 않습니다. 향후 변경될 수 있습니다.
+
+</Step>
+
+<Step number={14} title="컴포넌트 콘텐츠 추출" isOptional={true}>
 
 기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 데 시간이 많이 걸릴 수 있습니다.
 
@@ -922,74 +1043,72 @@ bun run build # Or bun run dev
 </Tabs>
 </Step>
 
-<Step number={11} title="지역화된 링크 컴포넌트 생성하기" isOptional={true}>
+</Steps>
 
-애플리케이션의 내비게이션이 현재 로케일을 준수하도록 하려면, 커스텀 `Link` 컴포넌트를 만들 수 있습니다. 이 컴포넌트는 내부 URL에 현재 언어를 자동으로 접두사로 붙여줍니다. 예를 들어, 프랑스어 사용자가 "About" 페이지로 가는 링크를 클릭하면 `/about` 대신 `/fr/about`로 리디렉션됩니다.
+### Turbopack에서 사전 변경 사항 감시
 
-이 동작은 여러 가지 이유로 유용합니다:
+`next dev --turbopack` 명령을 사용하여 개발 서버로 Turbopack을 사용할 때, 기본적으로 사전 변경 사항이 자동으로 감지되지 않습니다.
 
-- **SEO 및 사용자 경험**: 로컬라이즈된 URL은 검색 엔진이 언어별 페이지를 올바르게 색인하도록 도와주며, 사용자에게 선호하는 언어로 된 콘텐츠를 제공합니다.
-- **일관성**: 애플리케이션 전반에 걸쳐 로컬라이즈된 링크를 사용함으로써 내비게이션이 현재 로케일 내에서 유지되어 예상치 못한 언어 전환을 방지합니다.
-- **유지보수성**: 로컬라이제이션 로직을 단일 컴포넌트에 중앙 집중화하면 URL 관리를 단순화하여 애플리케이션이 성장함에 따라 코드베이스를 더 쉽게 유지보수하고 확장할 수 있습니다.
+이 제한은 Turbopack이 콘텐츠 파일의 변경 사항을 모니터링하기 위해 webpack 플러그인을 병렬로 실행할 수 없기 때문에 발생합니다. 이 문제를 해결하려면 `intlayer watch` 명령을 사용하여 개발 서버와 Intlayer 빌드 감시자를 동시에 실행해야 합니다.
 
-아래는 TypeScript로 구현한 로컬라이즈된 `Link` 컴포넌트입니다:
+```json5 fileName="package.json"
+{
+  // ... 기존 package.json 구성
+  "scripts": {
+    // ... 기존 스크립트 구성
+    "dev": "intlayer watch --with 'next dev'",
+  },
+}
+```
 
-```tsx fileName="src/components/Link.tsx" codeFormat={["typescript", "esm"]}
-"use client";
+> next-intlayer@<=6.x.x를 사용하는 경우, Next.js 16 애플리케이션이 Turbopack에서 올바르게 작동하도록 `--turbopack` 플래그를 유지해야 합니다. 이 제한을 피하기 위해 next-intlayer@>=7.x.x를 사용하는 것을 권장합니다.
 
-import { getLocalizedUrl } from "intlayer";
-import NextLink, { type LinkProps as NextLinkProps } from "next/link";
-import { useLocale } from "next-intlayer";
-import type { PropsWithChildren, FC } from "react";
+### TypeScript 구성
 
-/**
- * 주어진 URL이 외부 링크인지 확인하는 유틸리티 함수입니다.
- * URL이 http:// 또는 https://로 시작하면 외부 링크로 간주합니다.
- */
-export const checkIsExternalLink = (href?: string): boolean =>
-  /^https?:\/\//.test(href ?? "");
+Intlayer는 모듈 증강(module augmentation)을 사용하여 TypeScript의 이점을 활용하고 코드베이스를 더욱 견고하게 만듭니다.
 
-/**
- * 현재 로케일에 따라 href 속성을 조정하는 커스텀 Link 컴포넌트입니다.
- * 내부 링크의 경우, `getLocalizedUrl`을 사용하여 URL 앞에 로케일을 붙입니다 (예: /fr/about).
- * 이를 통해 내비게이션이 동일한 로케일 컨텍스트 내에서 이루어지도록 보장합니다.
- */
-export const Link: FC<PropsWithChildren<NextLinkProps>> = ({
-  href,
-  children,
-  ...props
-}) => {
-  const { locale } = useLocale();
-  const isExternalLink = checkIsExternalLink(href.toString());
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-  // 만약 링크가 내부 링크이고 유효한 href가 제공되었다면, 지역화된 URL을 가져옵니다.
-  const hrefI18n: NextLinkProps["href"] =
-    href && !isExternalLink ? getLocalizedUrl(href.toString(), locale) : href;
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
-  return (
-    <NextLink href={hrefI18n} {...props}>
-      {children}
-    </NextLink>
-  );
-};
+TypeScript 구성에 자동 생성된 타입이 포함되어 있는지 확인하세요.
+
+```json5 fileName="tsconfig.json"
+{
+  // ... 기존 TypeScript 구성
+  "include": [
+    // ... 기존 TypeScript 설정
+    ".intlayer/**/*.ts", // 자동 생성된 타입 포함
+  ],
+}
 ```
 
-#### 작동 원리
+### Git 설정
 
-- **외부 링크 감지**:  
-  유틸리티 함수 `checkIsExternalLink`는 URL이 외부 링크인지 확인합니다. 외부 링크는 현지화가 필요하지 않으므로 변경되지 않은 상태로 유지됩니다.
+Intlayer가 생성한 파일들은 Git 저장소에 커밋하지 않도록 무시하는 것이 권장됩니다.
 
-- **현재 로케일 가져오기**:  
-  `useLocale` 훅은 현재 로케일(예: 프랑스어의 경우 `fr`)을 제공합니다.
+이를 위해 `.gitignore` 파일에 다음 지시문을 추가할 수 있습니다:
 
-- **URL 현지화**:  
-  내부 링크(즉, 외부 링크가 아닌 링크)의 경우, `getLocalizedUrl`을 사용하여 URL 앞에 현재 로케일을 자동으로 붙입니다. 즉, 사용자가 프랑스어 환경에 있는 경우, `href`로 `/about`을 전달하면 `/fr/about`으로 변환됩니다.
+```plaintext fileName=".gitignore"
+# Intlayer가 생성한 파일 무시
+.intlayer
+```
 
-- **링크 반환**:  
-  컴포넌트는 현지화된 URL을 가진 `<a>` 요소를 반환하여 내비게이션이 로케일과 일치하도록 보장합니다.
+### VS Code 확장
 
-이 `Link` 컴포넌트를 애플리케이션 전반에 통합함으로써, 일관성 있고 언어를 인식하는 사용자 경험을 유지하는 동시에 향상된 SEO 및 사용성 이점을 누릴 수 있습니다.
+Intlayer와 함께 개발 경험을 향상시키기 위해 공식 **Intlayer VS Code 확장**을 설치할 수 있습니다.
 
-</Step>
+[VS Code 마켓플레이스에서 설치하기](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
-</Steps>
+이 확장은 다음 기능을 제공합니다:
+
+- 번역 키에 대한 **자동 완성**.
+- **실시간 오류 감지**로 누락된 번역을 확인할 수 있습니다.
+- **인라인 미리보기**로 번역된 내용을 바로 확인할 수 있습니다.
+- **빠른 작업**으로 번역을 쉽게 생성하고 업데이트할 수 있습니다.
+
+확장 기능 사용 방법에 대한 자세한 내용은 [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)를 사용하여 콘텐츠를 외부화할 수 있습니다.