@intlayer/docs 7.0.6 → 7.0.8-canary.0

package/frequent_questions/pt/static_rendering.md

@@ -15,8 +15,7 @@ keywords:
   - middleware
   - configuração
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - static-rendering
 ---
 
@@ -31,7 +30,6 @@ slugs:
   next-intl busca a localidade atual a partir de um cabeçalho disponível apenas na requisição (`x-next-intl-locale`) via `headers()`. Como `headers()` é uma **API dinâmica**, qualquer componente que a utilize perde a otimização estática. ([Next Intl][1], [Next.js][2])
 
 - **Solução oficial (boilerplate)**
-
   1. Exporte `generateStaticParams` com todas as localidades suportadas.
   2. Chame `setRequestLocale(locale)` em **todos** os layouts/páginas _antes_ de chamar `useTranslations`. ([Next Intl][1])
      Isso remove a dependência do cabeçalho, mas agora você tem código extra para manter e uma API instável em produção.

package/frequent_questions/pt/translated_path_url.md

@@ -15,8 +15,7 @@ keywords:
   - localidade
   - url
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - translated-path-url
 ---
 

package/frequent_questions/pt/unknown_command.md

@@ -15,8 +15,7 @@ keywords:
   - reiniciar
   - local
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - unknown-command
 ---
 

package/frequent_questions/ru/SSR_Next_no_[locale].md

@@ -15,8 +15,7 @@ keywords:
   - prefixDefault
   - noPrefix
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - ssr-next-no-[locale]
 ---
 

package/frequent_questions/ru/array_as_content_declaration.md

@@ -9,8 +9,7 @@ keywords:
   - объявление
   - intlayer
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - array-as-content-declaration
 ---
 

package/frequent_questions/ru/build_dictionaries.md

@@ -15,8 +15,7 @@ keywords:
   - next.js
   - vite
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - build-dictionaries
 ---
 

package/frequent_questions/ru/build_error_CI_CD.md

@@ -15,8 +15,7 @@ keywords:
   - предварительная сборка
   - автоматизация
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - build-error-ci-cd
 ---
 

package/frequent_questions/ru/bun_set_up.md

@@ -10,8 +10,7 @@ keywords:
   - конфигурация
   - менеджер пакетов
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - bun-set-up
 ---
 

package/frequent_questions/ru/customized_locale_list.md

@@ -15,8 +15,7 @@ keywords:
   - локаль
   - список
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - customized-locale-list
 ---
 

package/frequent_questions/ru/domain_routing.md

@@ -15,8 +15,7 @@ keywords:
   - vite
   - framework
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - domain-routing
 ---
 

package/frequent_questions/ru/esbuild_error.md

@@ -14,8 +14,7 @@ keywords:
   - react-native
   - lynx
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - esbuild-error
 ---
 

package/frequent_questions/ru/get_locale_cookie.md

@@ -15,8 +15,7 @@ keywords:
   - react-intlayer
   - vue-intlayer
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - get-locale-cookie
 ---
 

package/frequent_questions/ru/intlayer_command_undefined.md

@@ -15,8 +15,7 @@ keywords:
   - next.js
   - vite
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - intlayer-command-undefined
 ---
 

package/frequent_questions/ru/locale_incorect_in_url.md

@@ -15,8 +15,7 @@ keywords:
   - prefixDefault
   - noPrefix
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - locale-incorect-in-url
 ---
 

package/frequent_questions/ru/static_rendering.md

@@ -15,8 +15,7 @@ keywords:
   - middleware
   - конфигурация
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - static-rendering
 ---
 

package/frequent_questions/ru/translated_path_url.md

@@ -15,8 +15,7 @@ keywords:
   - локаль
   - url
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - translated-path-url
 ---
 

package/frequent_questions/ru/unknown_command.md

@@ -15,8 +15,7 @@ keywords:
   - перезапуск
   - локально
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - unknown-command
 ---
 

package/frequent_questions/tr/SSR_Next_no_[locale].md

@@ -15,8 +15,7 @@ keywords:
   - prefixDefault
   - noPrefix
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - ssr-next-no-[locale]
 ---
 

package/frequent_questions/tr/array_as_content_declaration.md

@@ -9,8 +9,7 @@ keywords:
   - bildirim
   - intlayer
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - array-as-content-declaration
 ---
 

package/frequent_questions/tr/build_dictionaries.md

@@ -15,8 +15,7 @@ keywords:
   - next.js
   - vite
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - build-dictionaries
 ---
 

package/frequent_questions/tr/build_error_CI_CD.md

@@ -15,8 +15,7 @@ keywords:
   - ön-derleme
   - otomasyon
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - build-error-ci-cd
 ---
 

package/frequent_questions/tr/bun_set_up.md

@@ -10,8 +10,7 @@ keywords:
   - yapılandırma
   - paket yöneticisi
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - bun-set-up
 ---
 

package/frequent_questions/tr/customized_locale_list.md

@@ -15,8 +15,7 @@ keywords:
   - locale
   - list
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - customized-locale-list
 ---
 

package/frequent_questions/tr/domain_routing.md

@@ -15,8 +15,7 @@ keywords:
   - vite
   - framework
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - domain-routing
 ---
 

package/frequent_questions/tr/esbuild_error.md

@@ -14,8 +14,7 @@ keywords:
   - react-native
   - lynx
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - esbuild-error
 ---
 

package/frequent_questions/tr/get_locale_cookie.md

@@ -15,8 +15,7 @@ keywords:
   - react-intlayer
   - vue-intlayer
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - get-locale-cookie
 ---
 

package/frequent_questions/tr/intlayer_command_undefined.md

@@ -15,8 +15,7 @@ keywords:
   - next.js
   - vite
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - intlayer-command-undefined
 ---
 

package/frequent_questions/tr/locale_incorect_in_url.md

@@ -15,8 +15,7 @@ keywords:
   - prefixDefault
   - noPrefix
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - locale-incorect-in-url
 ---
 

package/frequent_questions/tr/static_rendering.md

@@ -15,8 +15,7 @@ keywords:
   - middleware
   - yapılandırma
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - static-rendering
 ---
 

package/frequent_questions/tr/translated_path_url.md

@@ -15,8 +15,7 @@ keywords:
   - locale
   - url
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - translated-path-url
 ---
 

package/frequent_questions/tr/unknown_command.md

@@ -15,8 +15,7 @@ keywords:
   - yeniden başlat
   - local
 slugs:
-  - doc
-  - faq
+  - frequent-questions
   - unknown-command
 ---
 

package/frequent_questions/vi/SSR_Next_no_[locale].md

@@ -0,0 +1,106 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Có thể sử dụng Intlayer với Next.js mà không có `[locale]` trong đường dẫn trang không?
+description: Tìm hiểu cách sử dụng Intlayer với Next.js mà không có `[locale]` trong đường dẫn trang.
+keywords:
+  - locale
+  - path
+  - intlayer
+  - next.js
+  - vite
+  - framework
+  - middleware
+  - configuration
+  - prefixDefault
+  - noPrefix
+slugs:
+  - frequent-questions
+  - ssr-next-no-[locale]
+---
+
+# Có thể sử dụng Intlayer với Next.js mà không có `[locale]` trong đường dẫn trang không?
+
+Có, bạn có thể sử dụng Intlayer với Next.js mà không có `[locale]` trong đường dẫn trang. Tuy nhiên, điều này không được khuyến nghị, vì việc tách trang của bạn cho phép kích hoạt nhiều từ khóa hơn trên các công cụ tìm kiếm. SSR của bạn cũng có thể bị ảnh hưởng.
+
+Nếu bạn muốn làm như vậy, hãy làm theo các bước giống như được mô tả trong hướng dẫn [Intlayer với Next.js](https://intlayer.org/doc/environment/nextjs),
+
+- không có `src/middleware.ts`
+- không có `generateStaticParams`
+
+```tsx fileName="src/app/layout.tsx"
+import type { FC, PropsWithChildren } from "react";
+
+const LocaleLayout: FC<PropsWithChildren> = ({ children }) => (
+  <html lang={undefined} dir={undefined}>
+    <body className={inter.className}>{children}</body>
+  </html>
+);
+
+export default LocaleLayout;
+```
+
+```tsx fileName="src/app/page.tsx"
+import type { FC } from "react";
+import { ClientComponentExample } from "@components/ClientComponentExample";
+import { ServerComponentExample } from "@components/ServerComponentExample";
+import { PageContent } from "@components/pageContent";
+import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";
+import { IntlayerServerProvider } from "next-intlayer/server";
+
+const Page: FC = () => {
+  return (
+    <IntlayerServerProvider>
+      <PageContent />
+      <ServerComponentExample />
+
+      <IntlayerClientProvider>
+        <ClientComponentExample />
+      </IntlayerClientProvider>
+    </IntlayerServerProvider>
+  );
+};
+
+export default Page;
+```
+
+```tsx fileName="src/component/pageContent.ts"
+"use client";
+
+import { type FC } from "react";
+import { useIntlayer } from "next-intlayer";
+import { useHTMLLanguage } from "@hooks/htmlTextDir";
+
+const PageContent: FC = () => {
+  useHTMLLanguage();
+  const content = useIntlayer("page");
+
+  return (
+    <>
+      <p>{content.getStarted.main}</p>
+      <code>{content.getStarted.pageLink}</code>
+    </>
+  );
+};
+```
+
+```tsx fileName="src/hooks/htmlTextDir.ts"
+"use client";
+
+import { useEffect } from "react";
+import { getHTMLTextDir } from "intlayer";
+import { useLocale } from "next-intlayer";
+
+export const useHTMLLanguage = () => {
+  const { locale } = useLocale();
+
+  useEffect(() => {
+    if (!document) return;
+
+    // Thiết lập thuộc tính ngôn ngữ cho thẻ <html>
+    document.documentElement.lang = locale;
+    // Thiết lập hướng văn bản cho thẻ <html> dựa trên ngôn ngữ
+    document.documentElement.dir = getHTMLTextDir(locale);
+  }, [locale]);
+};
+```

package/frequent_questions/vi/array_as_content_declaration.md

@@ -0,0 +1,71 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Tôi có thể sử dụng mảng làm khai báo nội dung không?
+description: Tìm hiểu cách sử dụng mảng làm khai báo nội dung.
+keywords:
+  - mảng
+  - nội dung
+  - khai báo
+  - intlayer
+slugs:
+  - frequent-questions
+  - array-as-content-declaration
+---
+
+# Tôi có thể sử dụng mảng làm khai báo nội dung không?
+
+Có, bạn có thể sử dụng mảng làm khai báo nội dung.
+
+```ts
+import { t, type Dictionary } from "intlayer";
+
+const exampleContent = {
+  key: "example",
+  content: {
+    test: t({
+      en: ["Test", "Test2", "Test3"],
+      fr: ["Test", "Test2", "Test3"],
+      es: ["Test", "Test2", "Test3"],
+    }),
+  },
+};
+
+export default exampleContent;
+```
+
+Sau đó bạn có thể sử dụng nội dung như sau:
+
+```tsx
+import { useIntlayer } from "react-intlayer";
+
+const Example = () => {
+  const content = useIntlayer("example");
+
+  return (
+    <div>
+      {content.test.map((item) => (
+        <div key={item.value}>{item}</div>
+      ))}
+    </div>
+  );
+};
+```
+
+```vue
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+const content = useIntlayer("example");
+</script>
+
+<template>
+  <div>
+    <div v-for="item in content.test" :key="item.value">
+      {{ item }}
+    </div>
+  </div>
+</template>
+```
+
+`.value` cho phép bạn lấy giá trị của nội dung, không bị bao bọc bởi một `IntlayerNode`.

package/frequent_questions/vi/build_dictionaries.md

@@ -0,0 +1,58 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Cách xây dựng từ điển?
+description: Tìm hiểu cách xây dựng từ điển.
+keywords:
+  - xây dựng
+  - từ điển
+  - intlayer
+  - lệnh
+  - theo dõi
+  - vscode
+  - plugin
+  - framework
+  - next.js
+  - vite
+slugs:
+  - frequent-questions
+  - build-dictionaries
+---
+
+# Xây dựng từ điển
+
+## Cách xây dựng từ điển
+
+Intlayer cung cấp một công cụ dòng lệnh để xây dựng từ điển.
+
+```bash
+npx intlayer dictionaries build
+```
+
+Lệnh này:
+
+- Quét tất cả các tệp khai báo nội dung (`.content.{ts,tsx,js,mjs,cjs,json,...}`) trong dự án của bạn.
+- Tạo từ điển và lưu trữ chúng trong thư mục `.intlayer/dictionary`.
+
+### Chế độ theo dõi
+
+Nếu bạn muốn tự động cập nhật từ điển khi có thay đổi trong các tệp khai báo nội dung, hãy chạy lệnh sau:
+
+```bash
+npx intlayer dictionaries build --watch
+```
+
+Ở chế độ này, Intlayer sẽ quét và xây dựng lại từ điển mỗi khi có thay đổi trong các tệp khai báo nội dung và tự động cập nhật thư mục `.intlayer/dictionary`.
+
+### Sử dụng tiện ích mở rộng VSCode
+
+Bạn cũng có thể sử dụng [tiện ích mở rộng Intlayer cho VSCode](https://github.com/aymericzip/intlayer/tree/main/docs/vi/vs_code_extension.md) để nâng cao trải nghiệm Intlayer trong VSCode.
+
+### Sử dụng plugin cho framework ứng dụng yêu thích của bạn
+
+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.
+
+Intlayer sẽ xây dựng từ điển trước khi tiến hành build ứng dụng của bạn.
+Tương tự, ở chế độ phát triển, Intlayer sẽ theo dõi các thay đổi trong các tệp khai báo nội dung của bạn và tự động xây dựng lại từ điển.
+
+Vì vậy, hãy tham khảo tài liệu cụ thể của framework bạn đang sử dụng để tìm hiểu cách tích hợp plugin.

package/frequent_questions/vi/build_error_CI_CD.md

@@ -0,0 +1,74 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Lỗi build trong CI/CD
+description: Tìm hiểu cách sửa lỗi build xảy ra trong môi trường CI/CD.
+keywords:
+  - build
+  - lỗi
+  - ci
+  - cd
+  - pipeline
+  - intlayer
+  - dictionaries
+  - next.js
+  - prebuild
+  - automation
+slugs:
+  - frequent-questions
+  - build-error-ci-cd
+---
+
+# Lỗi khi build trên CI/CD
+
+Nếu bạn gặp lỗi như sau trên Next.js:
+
+```text
+Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error
+```
+
+Dưới đây là một số giải pháp:
+
+## 1. Thiếu dictionaries
+
+Đảm bảo rằng các dictionaries được build ở giai đoạn build.
+
+Thường xảy ra trường hợp build hoạt động tốt trên máy local nhưng không trên CI/CD. Lý do là trên máy local, thư mục `.intlayer` tồn tại, nhưng trên CI/CD thì không vì nó bị loại trừ khỏi quá trình build.
+
+Bạn có thể khắc phục bằng cách thêm một script prebuild trong file `package.json` của dự án.
+
+```json5 fileName=package.json
+{
+  // ...
+  "scripts": {
+    "prebuild": "npx intlayer dictionaries build", // Sẽ chạy trước khi build
+    "build": "next build",
+  },
+}
+```
+
+> Lưu ý rằng nếu bạn sử dụng hàm `withIntlayer`, hoặc plugin bundler tương đương cho framework của bạn, script prebuild sẽ được chạy trước khi build.
+
+## 2. Thiếu biến môi trường tại thời điểm build / chạy
+
+Trong một container, hoặc nền tảng tự động triển khai, nên loại trừ file `.env` khỏi quá trình build.
+
+```text fileName=".gitignore or .dockerignore"
+# Biến môi trường
+.env
+**/.env
+.env.*
+**/.env.*
+```
+
+Nếu biến môi trường của bạn không có sẵn tại thời điểm build, một lỗi sẽ được ném ra.
+
+```ts
+import { Metadata } from "next";
+
+export const generateMetadata = async ({ params }): Promise<Metadata> => ({
+  metadataBase: new URL(process.env.NEXT_PUBLIC_URL),
+});
+```
+
+Có thể vấn đề không liên quan đến Intlayer. Vì vậy hãy kiểm tra biến môi trường của bạn tại thời điểm build trên nền tảng CI/CD của bạn.