@intlayer/docs 7.0.6 → 7.0.8-canary.0

package/docs/tr/intlayer_with_next-intl.md

@@ -0,0 +1,446 @@
+---
+createdAt: 2025-10-05
+updatedAt: 2025-10-05
+title: Next.js 15'inizi next-intl kullanarak nasıl çevirirsiniz – i18n rehberi 2025
+description: Next.js 15 App Router web sitenizi çok dilli hale nasıl getireceğinizi keşfedin. Uluslararasılaştırma (i18n) ve çeviri için dokümantasyonu takip edin.
+keywords:
+  - Uluslararasılaştırma
+  - Dokümantasyon
+  - Intlayer
+  - Next.js 15
+  - next-intl
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - next-intl
+applicationTemplate: https://github.com/aymericzip/intlayer-next-intl-template
+---
+
+# Intlayer kullanarak Next.js 15 sitenizi next-intl ile çevirin | Uluslararasılaştırma (i18n)
+
+Bu rehber, Next.js 15 (App Router) uygulamasında next-intl en iyi uygulamalarını adım adım anlatır ve sağlam çeviri yönetimi ve otomasyon için Intlayer'ı nasıl entegre edeceğinizi gösterir.
+
+Karşılaştırmayı [next-i18next vs next-intl vs Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/tr/next-i18next_vs_next-intl_vs_intlayer.md) sayfasında inceleyin.
+
+- Yeni başlayanlar için: çalışan çok dilli bir uygulama elde etmek için adım adım bölümleri takip edin.
+- Orta seviye geliştiriciler için: payload optimizasyonu ve sunucu/istemci ayrımına dikkat edin.
+- Uzmanlar için: statik üretim, middleware, SEO entegrasyonu ve otomasyon kancalarına dikkat edin.
+
+Ele alacaklarımız:
+
+- Kurulum ve dosya yapısı
+- Mesajların yüklenme optimizasyonu
+- İstemci ve sunucu bileşen kullanımı
+- SEO için metadata, sitemap, robots
+- Locale yönlendirmesi için middleware
+- Üstüne Intlayer eklemek (CLI ve otomasyon)
+
+## next-intl kullanarak uygulamanızı kurun
+
+next-intl bağımlılıklarını yükleyin:
+
+```bash packageManager="npm"
+npm install next-intl
+```
+
+```bash packageManager="pnpm"
+pnpm add next-intl
+```
+
+```bash packageManager="yarn"
+yarn add next-intl
+```
+
+```bash
+.
+├── locales
+│   ├── en
+│   │  ├── common.json
+│   │  └── about.json
+│   ├── fr
+│   │  ├── common.json
+│   │  └── about.json
+│   └── es
+│      ├── common.json
+│      └── about.json
+└── src
+    ├── i18n.ts
+    ├── middleware.ts
+    ├── app
+    │   └── [locale]
+    │       ├── layout.tsx
+    │       └── about
+    │           └── page.tsx
+    └── components
+        ├── ClientComponentExample.tsx
+        └── ServerComponent.tsx
+```
+
+#### Kurulum ve İçerik Yükleme
+
+Yalnızca rotalarınızın ihtiyaç duyduğu namespace'leri yükleyin ve locale'leri erken doğrulayın. Mümkün olduğunda sunucu bileşenlerini senkron tutun ve istemciye yalnızca gerekli mesajları gönderin.
+
+```tsx fileName="src/i18n.ts"
+import { getRequestConfig } from "next-intl/server";
+import { notFound } from "next/navigation";
+
+export const locales = ["en", "fr", "es"] as const;
+export const defaultLocale = "en" as const;
+
+async function loadMessages(locale: string) {
+  // Yalnızca layout/ sayfalarınızın ihtiyaç duyduğu namespace'leri yükleyin
+  const [common, about] = await Promise.all([
+    import(`../locales/${locale}/common.json`).then((m) => m.default),
+    import(`../locales/${locale}/about.json`).then((m) => m.default),
+  ]);
+
+  return { common, about } as const;
+}
+
+export default getRequestConfig(async ({ locale }) => {
+  if (!locales.includes(locale as any)) notFound();
+
+  return {
+    messages: await loadMessages(locale),
+  };
+});
+```
+
+```tsx fileName="src/app/[locale]/layout.tsx"
+import type { ReactNode } from "react";
+import { locales } from "@/i18n";
+import {
+  getLocaleDirection,
+  unstable_setRequestLocale,
+} from "next-intl/server";
+
+export const dynamic = "force-static";
+
+export function generateStaticParams() {
+  return locales.map((locale) => ({ locale }));
+}
+
+export default async function LocaleLayout({
+  children,
+  params,
+}: {
+  children: ReactNode;
+  params: { locale: string };
+}) {
+  const { locale } = params;
+
+  // Bu sunucu renderı (RSC) için aktif istek yerelini ayarla
+  unstable_setRequestLocale(locale);
+
+  const dir = getLocaleDirection(locale);
+
+  return (
+    <html lang={locale} dir={dir}>
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+
+```tsx fileName="src/app/[locale]/about/page.tsx"
+import { getTranslations, getMessages, getFormatter } from "next-intl/server";
+import { NextIntlClientProvider } from "next-intl";
+import pick from "lodash/pick";
+import ServerComponent from "@/components/ServerComponent";
+import ClientComponentExample from "@/components/ClientComponentExample";
+
+export const dynamic = "force-static";
+
+export default async function AboutPage({
+  params,
+}: {
+  params: { locale: string };
+}) {
+  const { locale } = params;
+
+  // Mesajlar sunucu tarafında yüklenir. İstemciye sadece gerekenleri gönderin.
+  const messages = await getMessages();
+  const clientMessages = pick(messages, ["common", "about"]);
+
+  // Sadece sunucu tarafı çeviriler/formatlama
+  const tAbout = await getTranslations("about");
+  const tCounter = await getTranslations("about.counter");
+  const format = await getFormatter();
+
+  const initialFormattedCount = format.number(0);
+
+  return (
+    <NextIntlClientProvider locale={locale} messages={clientMessages}>
+      <main>
+        <h1>{tAbout("title")}</h1>
+        <ClientComponentExample />
+        <ServerComponent
+          formattedCount={initialFormattedCount}
+          label={tCounter("label")}
+          increment={tCounter("increment")}
+        />
+      </main>
+    </NextIntlClientProvider>
+  );
+}
+```
+
+### Bir istemci bileşeninde kullanım
+
+Bir sayaç render eden istemci bileşenine bir örnek alalım.
+
+**Çeviriler (şekil yeniden kullanıldı; bunları istediğiniz gibi next-intl mesajlarına yükleyin)**
+
+```json fileName="locales/en/about.json"
+{
+  "counter": {
+    "label": "Counter",
+    "increment": "Increment"
+  }
+}
+```
+
+```json fileName="locales/fr/about.json"
+{
+  "counter": {
+    "label": "Sayaç",
+    "increment": "Arttır"
+  }
+}
+```
+
+**İstemci bileşeni**
+
+```tsx fileName="src/components/ClientComponentExample.tsx"
+"use client";
+
+import React, { useState } from "react";
+import { useTranslations, useFormatter } from "next-intl";
+
+const ClientComponentExample = () => {
+  // Doğrudan iç içe nesneye kapsam belirleme
+  const t = useTranslations("about.counter");
+  const format = useFormatter();
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <p>{format.number(count)}</p>
+      <button
+        aria-label={t("label")}
+        onClick={() => setCount((count) => count + 1)}
+      >
+        {t("increment")}
+      </button>
+    </div>
+  );
+};
+```
+
+> Sayfa istemci mesajına "about" mesajını eklemeyi unutmayın
+> (istemcinizin gerçekten ihtiyaç duyduğu ad alanlarını dahil edin).
+
+### Bir sunucu bileşeninde kullanım
+
+Bu UI bileşeni bir sunucu bileşenidir ve bir istemci bileşeni altında render edilebilir (sayfa → istemci → sunucu). Önceden hesaplanmış dizeleri geçirerek senkron tutun.
+
+```tsx fileName="src/components/ServerComponent.tsx"
+type ServerComponentProps = {
+  formattedCount: string;
+  label: string;
+  increment: string;
+};
+
+const ServerComponent = ({
+  formattedCount,
+  label,
+  increment,
+}: ServerComponentProps) => {
+  return (
+    <div>
+      <p>{formattedCount}</p>
+      <button aria-label={label}>{increment}</button>
+    </div>
+  );
+};
+```
+
+Notlar:
+
+- `formattedCount` değerini sunucu tarafında hesaplayın (örneğin, `const initialFormattedCount = format.number(0)`).
+- Sunucu bileşenlerine fonksiyonlar veya serileştirilemeyen nesneler geçirmemeye dikkat edin.
+
+```tsx fileName="src/app/[locale]/about/layout.tsx"
+import type { Metadata } from "next";
+import { locales, defaultLocale } from "@/i18n";
+import { getTranslations } from "next-intl/server";
+
+function localizedPath(locale: string, path: string) {
+  return locale === defaultLocale ? path : "/" + locale + path;
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { locale: string };
+}): Promise<Metadata> {
+  const { locale } = params;
+  const t = await getTranslations({ locale, namespace: "about" });
+
+  const url = "/about";
+  const languages = Object.fromEntries(
+    locales.map((locale) => [locale, localizedPath(locale, url)])
+  );
+
+  return {
+    title: t("title"),
+    description: t("description"),
+    alternates: {
+      canonical: localizedPath(locale, url),
+      languages: { ...languages, "x-default": url },
+    },
+  };
+}
+
+// ... Sayfanın geri kalan kodu
+```
+
+```tsx fileName="src/app/sitemap.ts"
+import type { MetadataRoute } from "next";
+import { locales, defaultLocale } from "@/i18n";
+
+const origin = "https://example.com";
+
+const formatterLocalizedPath = (locale: string, path: string) =>
+  locale === defaultLocale ? origin + path : origin + "/" + locale + path;
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const aboutLanguages = Object.fromEntries(
+    locales.map((l) => [l, formatterLocalizedPath(l, "/about")])
+  );
+
+  return [
+    {
+      url: formatterLocalizedPath(defaultLocale, "/about"),
+      lastModified: new Date(),
+      changeFrequency: "aylık",
+      priority: 0.7,
+      alternates: { languages: aboutLanguages },
+    },
+  ];
+}
+```
+
+```tsx fileName="src/app/robots.ts"
+import type { MetadataRoute } from "next";
+import { locales, defaultLocale } from "@/i18n";
+
+const origin = "https://example.com";
+const withAllLocales = (path: string) => [
+  path,
+  ...locales
+    .filter((locale) => locale !== defaultLocale)
+    .map((locale) => "/" + locale + path),
+];
+
+export default function robots(): MetadataRoute.Robots {
+  const disallow = [
+    ...withAllLocales("/dashboard"),
+    ...withAllLocales("/admin"),
+  ];
+
+  return {
+    rules: { userAgent: "*", allow: ["/"], disallow },
+    host: origin,
+    sitemap: origin + "/sitemap.xml",
+  };
+}
+```
+
+### Yerel yönlendirme için Middleware
+
+Yerel algılama ve yönlendirmeyi yönetmek için bir middleware ekleyin:
+
+```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 dahili ve statik varlıkları atla
+  matcher: ["/((?!api|_next|.*\\..*).*)"],
+};
+```
+
+### En iyi uygulamalar
+
+- **html `lang` ve `dir` ayarlayın**: `src/app/[locale]/layout.tsx` içinde, `dir` değerini `getLocaleDirection(locale)` ile hesaplayın ve `<html lang={locale} dir={dir}>` olarak ayarlayın.
+- **Mesajları namespace bazında ayırın**: JSON dosyalarını locale ve namespace bazında organize edin (örneğin, `common.json`, `about.json`).
+- **İstemci yükünü minimize edin**: Sayfalarda, `NextIntlClientProvider`'a yalnızca gerekli namespace'leri gönderin (örneğin, `pick(messages, ['common', 'about'])`).
+- **Statik sayfaları tercih edin**: `export const dynamic = 'force-static'` olarak dışa aktarın ve tüm `locales` için statik parametreler oluşturun.
+- **Eşzamanlı sunucu bileşenleri**: Önceden hesaplanmış dizeleri (çevirilmiş etiketler, biçimlendirilmiş sayılar) async çağrılar veya serileştirilemeyen fonksiyonlar yerine geçirin.
+
+## next-intl üzerine Intlayer'ı uygulayın
+
+Intlayer bağımlılıklarını yükleyin:
+
+```bash packageManager="npm"
+npm install intlayer @intlayer/sync-json-plugin  -D
+```
+
+```bash packageManager="yarn"
+yarn add intlayer @intlayer/sync-json-plugin  -D
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer @intlayer/sync-json-plugin  -D
+```
+
+Intlayer yapılandırma dosyasını oluşturun:
+
+```tsx fileName="intlayer.config.ts"
+import { type IntlayerConfig, Locales } from "intlayer";
+import { syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  ai: {
+    apiKey: process.env.OPENAI_API_KEY,
+  },
+  plugins: [
+    // Namespace başına klasör yapınızı Intlayer ile senkronize tutun
+    syncJSON({
+      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
+    }),
+  ],
+};
+
+export default config;
+```
+
+`package.json` betiklerini ekleyin:
+
+```json fileName="package.json"
+{
+  "scripts": {
+    "i18n:fill": "intlayer fill",
+    "i18n:test": "intlayer test"
+  }
+}
+```
+
+Notlar:
+
+- `intlayer fill`: yapılandırdığınız yerel ayarlara göre eksik çevirileri doldurmak için AI sağlayıcınızı kullanır.
+- `intlayer test`: eksik/geçersiz çevirileri kontrol eder (CI'da kullanın).
+
+Argümanları ve sağlayıcıları yapılandırabilirsiniz; bkz. [Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/intlayer_cli.md).

package/docs/tr/intlayer_with_nextjs_16.md

@@ -24,10 +24,31 @@ history:
 
 # Intlayer kullanarak Next.js 16 web sitenizi çevirin | Uluslararasılaştırma (i18n)
 
+<Tab defaultTab="video">
+  <TabItem label="Video" value="video">
+  
 <iframe title="Next.js için en iyi i18n çözümü mü? Intlayer'ı keşfedin" 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/e_PPG7PTqGU?autoplay=0&amp;origin=http://intlayer.org&amp;controls=0&amp;rel=1"/>
 
+  </TabItem>
+  <TabItem label="Code" value="code">
+
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-next-16-template?embed=1&ctl=1&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 - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </TabItem>
+</Tab>
+
 GitHub'da [Uygulama Şablonunu](https://github.com/aymericzip/intlayer-next-16-template) inceleyin.
 
+## İçindekiler
+
+<TOC/>
+
 ## Intlayer Nedir?
 
 **Intlayer**, modern web uygulamalarında çok dilli desteği basitleştirmek için tasarlanmış yenilikçi, açık kaynaklı bir uluslararasılaştırma (i18n) kütüphanesidir. Intlayer, güçlü **App Router** dahil olmak üzere en son **Next.js 16** çerçevesiyle sorunsuz bir şekilde entegre olur. Verimli render için **Server Components** ile çalışacak şekilde optimize edilmiştir ve [**Turbopack**](https://nextjs.org/docs/architecture/turbopack) ile tam uyumludur.

package/docs/tr/intlayer_with_tanstack.md

@@ -28,6 +28,10 @@ history:
 
 # Intlayer ile Tanstack Start çevirin | Uluslararasılaştırma (i18n)
 
+## İçindekiler
+
+<TOC/>
+
 Bu rehber, Tanstack Start projelerinde yerel dil yönlendirmesi, TypeScript desteği ve modern geliştirme uygulamalarıyla sorunsuz uluslararasılaştırma için **Intlayer**'ın nasıl entegre edileceğini göstermektedir.
 
 ## Intlayer Nedir?

package/docs/tr/intlayer_with_vite+react.md

@@ -25,6 +25,10 @@ history:
 
 # Intlayer ile Vite and React çevirin | Uluslararasılaştırma (i18n)
 
+## İçindekiler
+
+<TOC/>
+
 <iframe title="Vite ve React için en iyi i18n çözümü? Intlayer'ı keşfedin" 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/dS9L7uJeak4?si=VaKmrYMmXjo3xpk2"/>
 
 GitHub'da [Uygulama Şablonu](https://github.com/aymericzip/intlayer-vite-react-template)'na bakın.

package/docs/vi/CI_CD.md

@@ -0,0 +1,198 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-08-13
+title: Tích hợp CI/CD
+description: Tìm hiểu cách tích hợp Intlayer vào pipeline CI/CD của bạn để quản lý và triển khai nội dung tự động.
+keywords:
+  - CI/CD
+  - Tích hợp liên tục
+  - Triển khai liên tục
+  - Tự động hóa
+  - Quốc tế hóa
+  - Tài liệu
+  - Intlayer
+slugs:
+  - doc
+  - concept
+  - ci-cd
+history:
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Khởi tạo lịch sử
+---
+
+# Tự động tạo bản dịch trong pipeline CI/CD
+
+Intlayer cho phép tự động tạo các bản dịch cho các file khai báo nội dung của bạn. Có nhiều cách để thực hiện điều này tùy thuộc vào quy trình làm việc của bạn.
+
+## Mục lục
+
+<TOC/>
+
+## Sử dụng CMS
+
+Với Intlayer, bạn có thể áp dụng một quy trình làm việc trong đó chỉ một locale duy nhất được khai báo cục bộ, trong khi tất cả các bản dịch được quản lý từ xa thông qua CMS. Điều này cho phép nội dung và các bản dịch hoàn toàn tách biệt khỏi codebase, mang lại sự linh hoạt hơn cho các biên tập viên nội dung và kích hoạt Live Sync (không cần phải xây dựng lại ứng dụng để áp dụng các thay đổi).
+
+### Cấu hình ví dụ
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.SPANISH, Locales.FRENCH],
+    requiredLocales: [Locales.ENGLISH], // Các locale tùy chọn sẽ được quản lý từ xa
+    defaultLocale: Locales.ENGLISH,
+  },
+  editor: {
+    // Thông tin xác thực CMS nếu bạn sử dụng CMS
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+    liveSync: true,
+  },
+  ai: {
+    applicationContext: "Đây là một ứng dụng thử nghiệm", // Giúp đảm bảo việc tạo bản dịch nhất quán
+  },
+};
+
+export default config;
+```
+
+Để tìm hiểu thêm về CMS, tham khảo [tài liệu chính thức](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_CMS.md).
+
+## Sử dụng Husky
+
+Bạn có thể tích hợp việc tạo bản dịch vào quy trình làm việc Git cục bộ của mình bằng cách sử dụng [Husky](https://typicode.github.io/husky/).
+
+### Cấu hình ví dụ
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.SPANISH, Locales.FRENCH],
+    requiredLocales: [Locales.ENGLISH], // Các ngôn ngữ tùy chọn được xử lý từ xa
+    defaultLocale: Locales.ENGLISH,
+  },
+  editor: {
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+  },
+  ai: {
+    provider: "openai",
+    apiKey: process.env.OPENAI_API_KEY, // Sử dụng khóa API của bạn
+
+    applicationContext: "Đây là một ứng dụng thử nghiệm", // Giúp đảm bảo việc tạo bản dịch nhất quán
+  },
+};
+
+export default config;
+```
+
+```bash fileName=".husky/pre-push"
+npx intlayer build                          # Để đảm bảo từ điển được cập nhật
+npx intlayer fill --unpushed --mode fill    # Chỉ điền nội dung còn thiếu, không cập nhật những nội dung đã có
+```
+
+> Để biết thêm thông tin về các lệnh Intlayer CLI và cách sử dụng chúng, hãy tham khảo [tài liệu CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_cli.md).
+
+> Nếu bạn có nhiều ứng dụng trong kho mã của mình sử dụng các instance intlayer riêng biệt, bạn có thể sử dụng đối số `--base-dir` như sau:
+
+```bash fileName=".husky/pre-push"
+# Ứng dụng 1
+npx intlayer build --base-dir ./app1
+npx intlayer fill --base-dir ./app1 --unpushed --mode fill
+
+# Ứng dụng 2
+npx intlayer build --base-dir ./app2
+npx intlayer fill --base-dir ./app2 --unpushed --mode fill
+```
+
+## Sử dụng GitHub Actions
+
+Intlayer cung cấp một lệnh CLI để tự động điền và xem lại nội dung từ điển. Điều này có thể được tích hợp vào quy trình CI/CD của bạn bằng cách sử dụng GitHub Actions.
+
+```yaml fileName=".github/workflows/intlayer-translate.yml"
+name: Tự động điền Intlayer
+# Điều kiện kích hoạt cho workflow này
+on:
+  pull_request:
+    branches:
+      - "main"
+
+permissions:
+  contents: write
+  pull-requests: write
+
+concurrency:
+  group: "autofill-${{ github.ref }}"
+  cancel-in-progress: true
+
+jobs:
+  autofill:
+    runs-on: ubuntu-latest
+    env:
+      # OpenAI
+      AI_MODEL: openai
+      AI_PROVIDER: gpt-5-mini
+      AI_API_KEY: ${{ secrets.AI_API_KEY }}
+
+    steps:
+      # Bước 1: Lấy mã nguồn mới nhất từ kho lưu trữ
+      - name: ⬇️ Kiểm tra kho lưu trữ
+        uses: actions/checkout@v4
+        with:
+          persist-credentials: true # Giữ lại thông tin xác thực để tạo PR
+          fetch-depth: 0 # Lấy toàn bộ lịch sử git để phân tích sự khác biệt
+
+      # Bước 2: Thiết lập môi trường Node.js
+      - name: 🟢 Thiết lập Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20 # Sử dụng Node.js 20 LTS để đảm bảo ổn định
+
+      # Bước 3: Cài đặt các phụ thuộc của dự án
+      - name: 📦 Cài đặt phụ thuộc
+        run: npm install
+
+      # Bước 4: Cài đặt Intlayer CLI toàn cục để quản lý bản dịch
+      - name: 📦 Cài đặt Intlayer
+        run: npm install -g intlayer-cli
+
+      # Bước 5: Xây dựng dự án Intlayer để tạo các file bản dịch
+      - name: ⚙️ Xây dựng dự án Intlayer
+        run: npx intlayer build
+
+      # Bước 6: Sử dụng AI để tự động điền các bản dịch còn thiếu
+      - name: 🤖 Tự động điền bản dịch còn thiếu
+        run: npx intlayer fill --git-diff --mode fill --provider $AI_PROVIDER --model $AI_MODEL --api-key $AI_API_KEY
+
+      # Bước 7: Kiểm tra xem có thay đổi nào không và commit chúng
+      - name: � Kiểm tra thay đổi
+        id: check-changes
+        run: |
+          if [ -n "$(git status --porcelain)" ]; then
+            echo "has-changes=true" >> $GITHUB_OUTPUT
+          else
+            echo "has-changes=false" >> $GITHUB_OUTPUT
+          fi
+
+      # Bước 8: Commit và đẩy các thay đổi nếu có
+      - name: 📤 Commit và đẩy thay đổi
+        if: steps.check-changes.outputs.has-changes == 'true'
+        run: |
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+          git add .
+          git commit -m "chore: tự động điền bản dịch còn thiếu [skip ci]"
+          git push origin HEAD:${{ github.head_ref }}
+```
+
+Để thiết lập các biến môi trường, hãy vào GitHub → Settings → Secrets and variables → Actions và thêm secret .
+
+> Tương tự như với Husky, trong trường hợp monorepo, bạn có thể sử dụng đối số `--base-dir` để xử lý tuần tự từng ứng dụng.
+
+> Mặc định, đối số `--git-diff` lọc các từ điển bao gồm các thay đổi từ base (mặc định `origin/main`) đến nhánh hiện tại (mặc định: `HEAD`).
+
+> Để biết thêm thông tin về các lệnh Intlayer CLI và cách sử dụng chúng, hãy tham khảo [tài liệu CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_cli.md).