@intlayer/docs 7.0.6 → 7.0.8-canary.0

package/frequent_questions/vi/bun_set_up.md

@@ -0,0 +1,53 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Tôi nhận được lỗi module not found khi sử dụng bun
+description: Sửa lỗi khi sử dụng bun.
+keywords:
+  - bun
+  - module not found
+  - intlayer
+  - cấu hình
+  - trình quản lý gói
+slugs:
+  - frequent-questions
+  - bun-set-up
+---
+
+# Tôi nhận được lỗi module not found khi sử dụng bun
+
+## Mô tả vấn đề
+
+Khi sử dụng bun, bạn có thể gặp lỗi như sau:
+
+```bash
+Cannot find package 'intlayer' from '/workspace/packages/@intlayer/config/dist/cjs/utils/ESMxCJSHelpers.cjs' undefined
+```
+
+## Nguyên nhân
+
+Intlayer sử dụng `require` bên trong. Và bun giới hạn hàm require chỉ để giải quyết các gói của package `@intlayer/config`, thay vì toàn bộ dự án.
+
+## Giải pháp
+
+### Cung cấp hàm `require` trong cấu hình
+
+```ts
+const config: IntlayerConfig = {
+  build: {
+    require, // cung cấp hàm require trong cấu hình build
+  },
+};
+
+export default config;
+```
+
+```ts fileName="next.config.ts" codeFormat="typescript"
+import { withIntlayer } from "next-intlayer/server";
+
+const configuration = withIntlayer({
+  require, // sử dụng hàm require khi cấu hình với Intlayer trong Next.js
+});
+
+export default configuration;
+```

package/frequent_questions/vi/customized_locale_list.md

@@ -0,0 +1,64 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Làm thế nào để tùy chỉnh danh sách ngôn ngữ?
+description: Tìm hiểu cách tùy chỉnh danh sách ngôn ngữ.
+keywords:
+  - locales
+  - danh sách
+  - intlayer
+  - cấu hình
+  - availableLocales
+  - defaultLocale
+  - useLocale
+  - hook
+  - locale
+  - danh sách
+slugs:
+  - frequent-questions
+  - customized-locale-list
+---
+
+# Có thể chặn một loại ngôn ngữ, như tiếng Anh không? Tôi đang thêm tiếng Anh vào từ điển nhưng chưa muốn tiếng Anh xuất hiện trên trang web
+
+Có, bạn có thể chặn một loại ngôn ngữ, như tiếng Anh, bằng cách sử dụng tùy chọn `availableLocales` trong cấu hình Intlayer.
+
+```ts
+import { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  locales: [Locales.FRENCH, Locales.SPANISH, Locales.ENGLISH],
+  availableLocales: [Locales.FRENCH, Locales.SPANISH],
+  defaultLocale: Locales.FRENCH,
+};
+```
+
+hoặc
+
+```ts
+import { IntlayerConfig } from "intlayer";
+
+const locales = [Locales.FRENCH, Locales.SPANISH, Locales.ENGLISH];
+
+const config: IntlayerConfig = {
+  locales,
+  availableLocales: locales.filter((locale) => locale !== Locales.ENGLISH),
+  defaultLocale: Locales.FRENCH,
+};
+```
+
+Cấu hình này sẽ thay đổi kiểu của hàm `t()` của bạn chỉ bao gồm các locale có sẵn.
+
+Tùy chọn availableLocales là tùy chọn, nếu bạn không cung cấp, tất cả các locale sẽ được sử dụng.
+
+Hãy cẩn thận, tất cả các locale được bao gồm trong tùy chọn `availableLocales` nên được bao gồm trong tùy chọn `locales`.
+
+Lưu ý rằng nếu bạn sử dụng hook `useLocale`, tùy chọn `availableLocales` sẽ được sử dụng để thiết lập quyền truy cập vào danh sách locale.
+
+```ts
+import { useLocale } from "intlayer";
+
+const { availableLocales } = useLocale();
+
+console.log(availableLocales); // [Locales.FRENCH, Locales.SPANISH]
+```

package/frequent_questions/vi/domain_routing.md

@@ -0,0 +1,113 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Cách cấu hình định tuyến dựa trên tên miền?
+description: Tìm hiểu cách cấu hình định tuyến dựa trên tên miền.
+keywords:
+  - domain
+  - routing
+  - intlayer
+  - configuration
+  - middleware
+  - react-router
+  - vue-router
+  - next.js
+  - vite
+  - framework
+slugs:
+  - frequent-questions
+  - domain-routing
+---
+
+# Làm thế nào để cấu hình **định tuyến dựa trên tên miền** với Intlayer thay vì các đường dẫn `/[locale]/`?
+
+## Trả lời ngắn gọn
+
+Định tuyến dựa trên tên miền đơn giản hơn định tuyến dựa trên đường dẫn (`example.com/[locale]/`) vì bạn có thể bỏ qua toàn bộ cấu hình middleware và routing. Chỉ cần triển khai ứng dụng của bạn lên từng tên miền ngôn ngữ và đặt một biến môi trường cho mỗi tên miền.
+
+## Các bước thực hiện
+
+1. **Triển khai một lần cho mỗi tên miền** (`example.com`, `exemple.fr`, `ejemplo.es`, …).
+2. Với mỗi lần triển khai, đặt `LOCALE` (và các biến môi trường Intlayer thông thường) thành ngôn ngữ mà tên miền đó sẽ phục vụ.
+3. Tham chiếu biến đó dưới dạng `defaultLocale` trong file `intlayer.config.[ts|js]` của bạn.
+
+```ts
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: process.env.LOCALE, // 👈 tên miền quyết định ngôn ngữ
+  },
+  // ... phần còn lại của cấu hình
+};
+
+export default config;
+```
+
+Chỉ vậy thôi — cách này hoạt động tương tự cho **Next.js**, **Vite + React**, **Vite + Vue**, v.v.
+
+## Nếu mọi tên miền đều trỏ đến cùng một lần triển khai thì sao?
+
+Nếu tất cả các tên miền đều trỏ đến cùng một bundle ứng dụng, bạn sẽ cần phát hiện host tại runtime và truyền ngôn ngữ thủ công thông qua provider.
+
+### Dành cho Next.js
+
+```tsx
+// src/IntlayerProvider.tsx
+import {
+  IntlayerClientProvider,
+  type IntlayerClientProviderProps,
+} from "next-intlayer";
+import { IntlayerServerProvider } from "next-intlayer/server";
+import type { FC } from "react";
+
+export const IntlayerProvider: FC<IntlayerClientProviderProps> = ({
+  children,
+  locale,
+}) => {
+  const resolvedLocale = locale ?? getLocaleFromHostname(); // 👈 lấy ngôn ngữ từ hostname nếu không có locale truyền vào
+  return (
+    <IntlayerServerProvider locale={resolvedLocale}>
+      <IntlayerClientProvider locale={resolvedLocale}>
+        {children}
+      </IntlayerClientProvider>
+    </IntlayerServerProvider>
+  );
+};
+```
+
+### Dành cho Vue
+
+```ts
+import { createApp } from "vue";
+import { installIntlayer } from "vue-intlayer";
+import App from "./App.vue";
+import { router } from "./routes";
+
+const app = createApp(App);
+app.use(router);
+installIntlayer(app, getLocaleFromHostname()); // 👈 cài đặt Intlayer với ngôn ngữ lấy từ hostname
+app.mount("#app");
+```
+
+Thay thế `getLocaleFromHostname()` bằng logic tra cứu của riêng bạn.
+
+## Cập nhật bộ chuyển đổi ngôn ngữ của bạn
+
+Khi sử dụng định tuyến dựa trên tên miền, việc thay đổi ngôn ngữ đồng nghĩa với việc điều hướng sang một tên miền khác:
+
+```ts
+const { locale } = useLocale();
+
+function changeLanguage(target: Locale) {
+  window.location.href = domainForLocale[target]; // 👈 chuyển hướng đến tên miền tương ứng với ngôn ngữ mục tiêu
+}
+```
+
+## Lợi ích của định tuyến dựa trên tên miền
+
+1. **Cấu hình đơn giản hơn**: Không cần cấu hình `intlayerMiddleware`, `generateStaticParams`, `react-router`, hoặc `vue-router`
+2. **SEO tốt hơn**: Mỗi ngôn ngữ có tên miền riêng
+3. **URL sạch hơn**: Không có tiền tố ngôn ngữ trong đường dẫn
+4. **Dễ bảo trì hơn**: Mỗi triển khai ngôn ngữ là độc lập

package/frequent_questions/vi/esbuild_error.md

@@ -0,0 +1,29 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Lỗi ESBuild
+description: Tìm hiểu cách sửa lỗi ESBuild.
+keywords:
+  - esbuild
+  - lỗi
+  - intlayer
+  - plugin
+  - framework
+  - next.js
+  - vite
+  - react-native
+  - lynx
+slugs:
+  - frequent-questions
+  - esbuild-error
+---
+
+# Lỗi ESBuild
+
+Nếu bạn gặp lỗi ESBuild trong quá trình build, rất có thể plugin Intlayer chưa được cấu hình đúng cách.
+
+ESBuild chịu trách nhiệm đọc các file khai báo nội dung (`.content.{ts,js,mjs,cjs,json}`) và tạo ra các từ điển tương ứng trong thư mục `.intlayer/dictionary`. Cũng như đọc file cấu hình (`intlayer.config.ts`).
+
+Intlayer cung cấp các plugin để tích hợp với các bundler của bạn. Nó được thiết kế để alias các component chỉ chạy trên phía server.
+
+Nếu bạn đang sử dụng một framework như Next.js (Webpack / Turbopack), Vite, hoặc React Native, Lynx, v.v. Intlayer cung cấp một plugin mà bạn có thể sử dụng để tích hợp Intlayer vào ứng dụng của mình. Vì vậy, hãy tham khảo tài liệu cụ thể của framework bạn đang dùng để tìm hiểu cách tích hợp plugin.

package/frequent_questions/vi/get_locale_cookie.md

@@ -0,0 +1,142 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Cách lấy locale từ cookie / headers?
+description: Tìm hiểu cách lấy locale từ cookie / headers.
+keywords:
+  - cookie
+  - headers
+  - intlayer
+  - locale
+  - hook
+  - useLocale
+  - useLocaleCookie
+  - next.js
+  - react-intlayer
+  - vue-intlayer
+slugs:
+  - frequent-questions
+  - get-locale-cookie
+---
+
+# Cách lấy locale từ cookie / headers
+
+## Sử dụng Hooks (Khuyến nghị)
+
+Đối với hầu hết các trường hợp sử dụng, nên lấy locale hiện tại bằng hook `useLocale` vì nó được tự động giải quyết. Điều này hoạt động tương tự như composable `useLocale` trong Vue.js.
+
+```ts
+import { useLocale } from "next-intlayer";
+// or import { useLocale } from "react-intlayer";
+// hoặc import { useLocale } từ "vue-intlayer";
+
+// Sử dụng phía client
+const { locale } = useLocale();
+```
+
+Đối với các server component, bạn có thể import từ:
+
+```tsx
+import { useLocale } từ "next-intlayer/server";
+
+const Test = () => {
+  const { locale } = useLocale();
+  return <>{locale}</>;
+};
+
+const Page = async ({ params }) => {
+  const { locale } = await params;
+
+  return (
+    <IntlayerServerProvider locale={locale}>
+      <Test />
+    </IntlayerServerProvider>
+  );
+};
+```
+
+Cũng có một hook `useLocaleCookie` chỉ giải quyết giá trị cookie.
+
+## Cấu hình Cookie thủ công
+
+Bạn có thể khai báo tên cookie tùy chỉnh như sau
+
+```ts
+import { type IntlayerConfig } từ "intlayer";
+
+const config: IntlayerConfig = {
+  middleware: {
+    cookieName: "myCustomLocaleCookie", // mặc định là 'intlayer-locale'
+  },
+};
+
+export default config;
+```
+
+cách lấy lại giá trị như sau
+
+### Phía client
+
+```ts
+// Sử dụng tên cookie mặc định
+const locale = document.cookie
+  .split("; ")
+  .find((row) => row.startsWith("intlayer-locale="))
+  ?.split("=")[1];
+
+// Sử dụng tên cookie tùy chỉnh
+const locale = document.cookie
+  .split("; ")
+  .find((row) => row.startsWith("myCustomLocaleCookie="))
+  ?.split("=")[1];
+```
+
+### Phía server (Next.js)
+
+```ts
+import { cookies } from "next/headers";
+
+// Sử dụng tên cookie mặc định
+const locale = cookies().get("intlayer-locale")?.value;
+
+// Sử dụng tên cookie tùy chỉnh
+const locale = cookies().get("myCustomLocaleCookie")?.value;
+```
+
+### Nếu locale chưa được thiết lập
+
+Locale chỉ được thiết lập dưới dạng cookie khi người dùng chọn rõ ràng locale. Mặc định, đối với khách truy cập mới, locale được suy diễn từ các trường header.
+
+Bạn có thể phát hiện locale ưu tiên của người dùng từ các header của yêu cầu. Dưới đây là ví dụ về cách xử lý điều này:
+
+```ts
+/**
+ * Phát hiện locale từ các header của yêu cầu
+ *
+ * Header accept-language là header quan trọng nhất để phát hiện locale.
+ * Nó chứa danh sách các mã ngôn ngữ kèm theo giá trị chất lượng (q-value) cho biết
+ * các ngôn ngữ ưu tiên của người dùng theo thứ tự ưu tiên.
+ *
+ * Ví dụ: "en-US,en;q=0.9,fr;q=0.8,es;q=0.7"
+ * - en-US là ngôn ngữ chính (q=1.0 được ngầm định)
+ * - en là lựa chọn thứ hai (q=0.9)
+ * - fr là lựa chọn thứ ba (q=0.8)
+ * - es là lựa chọn thứ tư (q=0.7)
+ */
+import { localeDetector } from "@intlayer/core";
+
+/**
+ * Ví dụ về các header negotiator mà trình duyệt thường gửi
+ * Những header này giúp xác định ngôn ngữ ưu tiên của người dùng
+ */
+const exampleNegotiatorHeaders: Record<string, string> = {
+  "accept-language": "en-US,en;q=0.9,fr;q=0.8,es;q=0.7",
+  "accept":
+    "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8",
+  "user-agent":
+    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36",
+};
+
+// Ví dụ sử dụng:
+const detectedLocale = localeDetector(exampleNegotiatorHeaders);
+```

package/frequent_questions/vi/intlayer_command_undefined.md

@@ -0,0 +1,155 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Lệnh Intlayer không xác định
+description: Tìm hiểu cách khắc phục lỗi lệnh intlayer không xác định.
+keywords:
+  - intlayer
+  - lệnh
+  - không xác định
+  - lỗi
+  - vscode
+  - tiện ích mở rộng
+  - plugin
+  - framework
+  - next.js
+  - vite
+slugs:
+  - frequent-questions
+  - intlayer-command-undefined
+---
+
+# Lệnh Intlayer không xác định
+
+## Tổng quan
+
+CLI Intlayer cung cấp một cách thuận tiện để kiểm soát nội dung intlayer của bạn, bao gồm xây dựng từ điển, đẩy bản dịch và nhiều hơn nữa. Tuy nhiên, nó không bắt buộc để dự án của bạn hoạt động. Nếu bạn đang sử dụng plugin bundler (như `withIntlayer()` cho Next.js hoặc `intlayer()` cho Vite), Intlayer sẽ tự động xây dựng từ điển trong quá trình xây dựng ứng dụng hoặc khi khởi động server phát triển. Ở chế độ phát triển, nó cũng sẽ theo dõi các thay đổi và tự động xây dựng lại các tệp khai báo nội dung.
+
+Bạn có thể truy cập các lệnh intlayer theo nhiều cách khác nhau:
+
+- Sử dụng lệnh CLI `intlayer` trực tiếp
+- Sử dụng [tiện ích mở rộng VSCode](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/vs_code_extension.md)
+- Sử dụng SDK `@intlayer/cli`
+
+## Vấn đề
+
+Khi cố gắng sử dụng lệnh `intlayer`, bạn có thể gặp lỗi sau:
+
+```bash
+'intlayer' không được nhận dạng là lệnh nội bộ hoặc bên ngoài,
+chương trình có thể thực thi hoặc tệp batch.
+```
+
+## Giải pháp
+
+Hãy thử các giải pháp sau theo thứ tự:
+
+1. **Xác minh lệnh đã được cài đặt**
+
+```bash
+npx intlayer -h
+```
+
+Kết quả mong đợi:
+
+```bash
+Usage: intlayer [options] [command]
+
+Intlayer CLI
+
+Options:
+    -V, --version            xuất phiên bản
+    -h, --help               hiển thị trợ giúp cho lệnh
+
+Commands:
+    dictionary|dictionaries  Các thao tác với từ điển
+    configuration|config     Các thao tác cấu hình
+    help [command]           hiển thị trợ giúp cho lệnh
+```
+
+2. **Cài đặt gói intlayer-cli toàn cục**
+
+```bash
+npm install intlayer-cli -g -g
+```
+
+> Không cần thiết nếu bạn đã cài đặt gói `intlayer`
+
+3. **Cài đặt gói toàn cục**
+
+```bash
+npm install intlayer -g
+```
+
+4. **Khởi động lại terminal của bạn**
+   Đôi khi cần khởi động lại terminal để nhận diện các lệnh mới.
+
+5. **Dọn dẹp và cài đặt lại**
+   Nếu các giải pháp trên không hiệu quả:
+
+```bash
+rm -rf node_modules package-lock.json
+npm install
+```
+
+6. **Xác minh các tệp cài đặt**
+   Nếu vấn đề vẫn tiếp diễn, kiểm tra xem các tệp sau có tồn tại không:
+   - `node_modules/intlayer/dist/cjs/cli.cjs`
+   - `node_modules/intlayer/package.json` (nên có trường `bin` tham chiếu tới `./dist/cjs/cli.cjs`)
+
+7. **Kiểm tra biến môi trường PATH**
+   Đảm bảo thư mục bin toàn cục của npm nằm trong PATH của bạn:
+
+```bash
+# Đối với hệ thống Unix (macOS/Linux)
+echo $PATH
+# Nên bao gồm một thư mục như /usr/local/bin hoặc ~/.npm-global/bin
+
+# Đối với Windows
+echo %PATH%
+# Nên bao gồm thư mục bin toàn cục của npm
+```
+
+8. **Sử dụng npx với đường dẫn đầy đủ**
+   Nếu lệnh vẫn không tìm thấy, hãy thử dùng npx với đường dẫn đầy đủ:
+
+```bash
+npx ./node_modules/intlayer/ dictionaries build
+```
+
+9. **Kiểm tra các cài đặt xung đột**
+
+```bash
+# Liệt kê tất cả các gói được cài đặt toàn cục
+npm list -g --depth=0
+
+# Gỡ bỏ các cài đặt toàn cục xung đột
+npm uninstall -g intlayer
+npm uninstall -g intlayer-cli
+# Sau đó cài đặt lại
+npm install -g intlayer
+```
+
+10. **Xác minh phiên bản Node.js và npm**
+    Đảm bảo bạn đang sử dụng các phiên bản tương thích:
+
+```bash
+node --version
+npm --version
+```
+
+    Nếu bạn đang dùng phiên bản cũ, hãy cân nhắc cập nhật Node.js và npm.
+
+11. **Kiểm tra các vấn đề về quyền truy cập**
+    Nếu bạn gặp lỗi về quyền:
+
+    ```bash
+    # Đối với hệ thống dựa trên Unix
+    sudo npm install -g intlayer
+
+    # Hoặc thay đổi thư mục mặc định của npm
+    mkdir ~/.npm-global
+    npm config set prefix '~/.npm-global'
+    # Thêm vào ~/.profile hoặc ~/.bashrc của bạn:
+    export PATH=~/.npm-global/bin:$PATH
+    ```

package/frequent_questions/vi/locale_incorect_in_url.md

@@ -0,0 +1,73 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Lấy Sai Locale Từ URL
+description: Tìm hiểu cách khắc phục lỗi lấy sai locale từ URL.
+keywords:
+  - locale
+  - url
+  - intlayer
+  - next.js
+  - vite
+  - framework
+  - middleware
+  - configuration
+  - prefixDefault
+  - noPrefix
+slugs:
+  - frequent-questions
+  - locale-incorect-in-url
+---
+
+# Lấy Sai Locale Từ URL
+
+## Mô Tả Vấn Đề
+
+Khi cố gắng truy cập tham số locale từ URL, bạn có thể gặp phải vấn đề giá trị locale bị sai:
+
+```js
+const { locale } = await params;
+console.log(locale); // trả về "about" thay vì locale mong đợi
+```
+
+## Giải Pháp
+
+### 1. Kiểm Tra Cấu Trúc Thư Mục
+
+Đảm bảo đường dẫn app router của Next.js của bạn theo cấu trúc sau:
+
+```bash
+src/app/[locale]/about/page.tsx
+```
+
+### 2. Kiểm Tra Cấu Hình Middleware
+
+Vấn đề thường xảy ra khi middleware không tồn tại hoặc không được kích hoạt. File middleware nên được đặt tại:
+
+```bash
+src/middleware.ts
+```
+
+Middleware này chịu trách nhiệm viết lại các route khi `prefixDefault` được đặt là `false`. Ví dụ, nó sẽ viết lại `/en/about` thành `/about`.
+
+### 3. Mẫu URL Dựa Trên Cấu Hình
+
+#### Cấu Hình Mặc Định (`prefixDefault: false`, `noPrefix: false`)
+
+- Tiếng Anh: `/about`
+- Tiếng Pháp: `/fr/about`
+- Tiếng Tây Ban Nha: `/es/about`
+
+#### Với `prefixDefault: true`
+
+- Tiếng Anh: `/en/about`
+- Tiếng Pháp: `/fr/about`
+- Tiếng Tây Ban Nha: `/es/about`
+
+#### Với `noPrefix: true`
+
+- Tiếng Anh: `/about`
+- Tiếng Pháp: `/about`
+- Tiếng Tây Ban Nha: `/about`
+
+Để biết thêm chi tiết về các tùy chọn cấu hình này, hãy xem [Tài liệu Cấu hình](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/configuration.md).

package/frequent_questions/vi/static_rendering.md

@@ -0,0 +1,44 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Kết xuất Tĩnh và Động với i18n trong Next.js
+description: Tìm hiểu cách sử dụng kết xuất tĩnh và động với i18n trong Next.js.
+keywords:
+  - tĩnh
+  - động
+  - kết xuất
+  - i18n
+  - next.js
+  - next-intl
+  - intlayer
+  - framework
+  - middleware
+  - cấu hình
+slugs:
+  - frequent-questions
+  - static-rendering
+---
+
+# Kết xuất Tĩnh và Động với i18n trong Next.js
+
+## Vấn đề với **next-intl**
+
+- **Chuyện gì xảy ra?**
+  Khi bạn sử dụng `useTranslations`, `getTranslations`, hoặc bất kỳ helper nào của next-intl _bên trong một Server Component_ trên một ứng dụng có định tuyến i18n (`/en/…`, `/fr/…`), Next.js sẽ đánh dấu toàn bộ route đó là **động**. ([Next Intl][1])
+
+- **Tại sao?**
+  next-intl tra cứu locale hiện tại từ một header chỉ dành cho request (`x-next-intl-locale`) thông qua `headers()`. Vì `headers()` là một **API động**, bất kỳ component nào sử dụng nó sẽ mất đi khả năng tối ưu tĩnh. ([Next Intl][1], [Next.js][2])
+
+- **Giải pháp chính thức (boilerplate)**
+  1. Xuất `generateStaticParams` với tất cả các locale được hỗ trợ.
+  2. Gọi `setRequestLocale(locale)` trong **mọi** layout/trang _trước khi_ bạn gọi `useTranslations`. ([Next Intl][1])
+     Điều này loại bỏ sự phụ thuộc vào header, nhưng bạn sẽ có thêm mã để duy trì và một API không ổn định trong môi trường production.
+
+## Cách **intlayer** tránh được vấn đề này
+
+**Lựa chọn thiết kế**
+
+1. **Chỉ dùng tham số route** – Locale lấy từ đoạn URL `[locale]` mà Next.js đã truyền sẵn cho mỗi trang.
+2. **Gói biên dịch thời gian biên dịch** – Các bản dịch được nhập dưới dạng các module ES thông thường, vì vậy chúng được tree-shaken và nhúng vào thời gian biên dịch.
+3. **Không dùng API động** – `useT()` đọc từ React context, không phải từ `headers()` hay `cookies()`.
+4. **Không cần cấu hình thêm** – Khi các trang của bạn nằm dưới `app/[locale]/`, Next.js tự động prerender một file HTML cho mỗi locale.