Tài liệu Intlayer

Chào mừng bạn đến với tài liệu chính thức của Intlayer! Tại đây, bạn sẽ tìm thấy mọi thứ bạn cần để tích hợp, định cấu hình và làm chủ Intlayer cho mọi nhu cầu quốc tế hóa (i18n) của mình, cho dù bạn đang làm việc với Next.js, React, Vite, Express hay một môi trường JavaScript khác.

Giới thiệu

Intlayer là gì?

Intlayer là một thư viện quốc tế hóa được thiết kế đặc biệt dành cho các nhà phát triển JavaScript. Nó cho phép khai báo nội dung ở mọi nơi trong mã của bạn. Nó chuyển đổi việc khai báo nội dung đa ngôn ngữ thành các từ điển có cấu trúc để dễ dàng tích hợp vào mã của bạn. Việc sử dụng TypeScript giúp Intlayer làm cho quá trình phát triển của bạn mạnh mẽ và hiệu quả hơn.

Intlayer cũng cung cấp một trình soạn thảo trực quan tùy chọn cho phép bạn dễ dàng chỉnh sửa và quản lý nội dung của mình. Trình soạn thảo này đặc biệt hữu ích cho các nhà phát triển thích giao diện trực quan để quản lý nội dung, hoặc cho các nhóm tạo nội dung mà không phải lo lắng về code.

Ví dụ về cách sử dụng

.└── Components    └── MyComponent        ├── index.content.ts        └── index.tsx

import { t, type Dictionary } from "intlayer";

const componentContent = {
  key: "component-key",
  content: {
    myTranslatedContent: t({
      en: "Hello World",
      es: "Hola Mundo",
      fr: "Bonjour le monde",
      vi: "Chào Thế giới",
    }),
  },
} satisfies Dictionary;

export default componentContent;

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

export const MyComponent: FC = () => {
  const { myTranslatedContent } = useIntlayer("component-key");

  return <span>{myTranslatedContent}</span>;
};

Tại sao chọn Intlayer thay vì các giải pháp thay thế?

So với các giải pháp chính như next-intl hoặc i18next, Intlayer là một giải pháp đi kèm với các tối ưu hóa được tích hợp sẵn như:

Các tính năng chính

Intlayer cung cấp một loạt các tính năng được điều chỉnh để đáp ứng nhu cầu phát triển web hiện đại. Dưới đây là các tính năng chính, cùng với các liên kết đến tài liệu chi tiết cho từng tính năng:

• Hỗ trợ Quốc tế hóa: Tăng cường phạm vi tiếp cận toàn cầu của ứng dụng với khả năng hỗ trợ quốc tế hóa được tích hợp sẵn.
• Trình soạn thảo Trực quan (Visual Editor): Cải thiện quy trình phát triển của bạn với các plugin trình soạn thảo được thiết kế cho Intlayer. Hãy xem Hướng dẫn về Trình soạn thảo Trực quan.
• Cấu hình Linh hoạt: Tùy chỉnh thiết lập của bạn với các tùy chọn cấu hình mở rộng được trình bày chi tiết trong Hướng dẫn Cấu hình.
• Công cụ CLI Nâng cao: Quản lý các dự án của bạn một cách hiệu quả bằng giao diện dòng lệnh của Intlayer. Khám phá các khả năng trong Tài liệu về Công cụ CLI.

Các khái niệm cốt lõi

Từ điển (Dictionary)

Tổ chức nội dung đa ngôn ngữ của bạn gần với mã để giữ cho mọi thứ nhất quán và dễ bảo trì.

• Bắt đầu
  Tìm hiểu các khái niệm cơ bản về việc khai báo nội dung của bạn trong Intlayer.

• Dịch thuật (Translation)
  Hiểu cách các bản dịch được tạo, lưu trữ và sử dụng trong ứng dụng của bạn.

• Liệt kê (Enumeration)
  Dễ dàng quản lý các tập dữ liệu lặp lại hoặc cố định trên nhiều ngôn ngữ khác nhau.

• Điều kiện (Condition)
  Tìm hiểu cách sử dụng logic có điều kiện trong Intlayer để tạo nội dung động.

• Chèn (Insertion)
  Khám phá cách chèn các giá trị vào một chuỗi (string) bằng cách sử dụng trình giữ chỗ (placeholder) chèn.

• Lấy hàm (Function Fetching)
  Xem cách tìm nạp nội dung động với logic tùy chỉnh để phù hợp với luồng công việc dự án của bạn.

• Markdown
  Tìm hiểu cách sử dụng Markdown trong Intlayer để tạo nội dung phong phú.

• Nhúng tệp (File embeddings)
  Khám phá cách nhúng các tệp bên ngoài vào Intlayer để sử dụng chúng trong trình soạn thảo nội dung.

• Lồng nhau (Nesting)
  Hiểu cách lồng nội dung trong Intlayer để tạo các cấu trúc phức tạp.

Môi trường & Tích hợp

Chúng tôi đã xây dựng Intlayer với tính linh hoạt cao, cung cấp khả năng tích hợp liền mạch trên các framework và công cụ build phổ biến:

• Intlayer với Next.js 16
• Intlayer với Next.js 15
• Intlayer với Next.js 14 (App Router)
• Intlayer với Next.js Page Router
• Intlayer với React CRA
• Intlayer với Vite + React
• Intlayer với React Router v7
• Intlayer với Tanstack Start
• Intlayer với React Native và Expo
• Intlayer với Lynx và React
• Intlayer với Vite + Preact
• Intlayer với Vite + Vue
• Intlayer với Nuxt
• Intlayer với Vite + Svelte
• Intlayer với SvelteKit
• Intlayer với Express
• Intlayer với NestJS
• Intlayer với Hono
• Intlayer với Angular

Mỗi hướng dẫn tích hợp bao gồm các phương pháp hay nhất để sử dụng các tính năng của Intlayer, chẳng hạn như kết xuất phía máy chủ (SSR), định tuyến động hoặc kết xuất phía máy khách, để bạn có thể duy trì một ứng dụng nhanh, thân thiện với SEO và có khả năng mở rộng cao.

Đóng góp & Phản hồi

Chúng tôi coi trọng sức mạnh của nguồn mở và sự phát triển do cộng đồng thúc đẩy. Nếu bạn muốn đề xuất các cải tiến, thêm một hướng dẫn mới, hoặc sửa chữa bất kỳ vấn đề nào trong tài liệu của chúng tôi, vui lòng gửi Pull Request hoặc mở Issue trên kho lưu trữ GitHub của chúng tôi.

Bạn đã sẵn sàng để dịch ứng dụng của mình nhanh hơn và hiệu quả hơn chưa? Hãy đi sâu vào tài liệu của chúng tôi để bắt đầu sử dụng Intlayer ngay hôm nay. Trải nghiệm một cách tiếp cận mạnh mẽ, hợp lý đối với quốc tế hóa giúp giữ cho nội dung của bạn được tổ chức và nhóm của bạn làm việc hiệu quả hơn.