Dịch trang web Next.js 16 của bạn (không có [locale] trong đường dẫn trang) bằng Intlayer | Quốc tế hóa (i18n)

Xem Mẫu ứng dụng trên GitHub.

Mục lục

Intlayer là gì?

Intlayer là một thư viện quốc tế hóa (i18n) mã nguồn mở, sáng tạo, được thiết kế để đơn giản hóa việc hỗ trợ đa ngôn ngữ trong các ứng dụng web hiện đại. Intlayer tích hợp liền mạch với framework Next.js 16 mới nhất, bao gồm cả App Router mạnh mẽ. Nó được tối ưu để hoạt động với Server Components nhằm rendering hiệu quả và tương thích đầy đủ với Turbopack.

Với Intlayer, bạn có thể:

• Quản lý bản dịch một cách dễ dàng bằng cách sử dụng các từ điển khai báo ở cấp component.
• Địa phương hóa động metadata, routes và nội dung.
• Truy cập bản dịch trong cả client-side và server-side components.
• Đảm bảo hỗ trợ TypeScript với các kiểu tự động sinh, cải thiện tính tự hoàn thành và phát hiện lỗi.
• Tận dụng các tính năng tiên tiến, như phát hiện và chuyển đổi locale động.

Intlayer tương thích với Next.js 12, 13, 14 và 16. Nếu bạn đang sử dụng Next.js Page Router, bạn có thể tham khảo hướng dẫn này. Đối với Next.js 12, 13, 14 với App Router, tham khảo hướng dẫn này.

Hướng dẫn từng bước để cài đặt Intlayer trong ứng dụng Next.js

Bước 1: Cài đặt phụ thuộc

Cài đặt các gói cần thiết bằng npm:

npm install intlayer next-intlayernpx intlayer init

• intlayer

  Gói lõi cung cấp các công cụ quốc tế hóa cho quản lý cấu hình, dịch thuật, khai báo nội dung, transpilation, và các lệnh CLI.

• next-intlayer

Gói tích hợp Intlayer với Next.js. Nó cung cấp các context providers và hooks cho việc quốc tế hóa trong Next.js. Ngoài ra, nó bao gồm plugin Next.js để tích hợp Intlayer với Webpack hoặc Turbopack, cũng như proxy để phát hiện locale ưa thích của người dùng, quản lý cookie và xử lý chuyển hướng URL.

Bước 2: Cấu hình dự án của bạn

Dưới đây là cấu trúc cuối cùng mà chúng ta sẽ tạo:

.├── src│   ├── app│   │   ├── layout.tsx│   │   ├── page.content.ts│   │   └── page.tsx│   ├── components│   │   ├── clientComponentExample│   │   │   ├── client-component-example.content.ts│   │   │   └── ClientComponentExample.tsx│   │   ├── localeSwitcher│   │   │   ├── localeSwitcher.content.ts│   │   │   └── LocaleSwitcher.tsx│   │   └── serverComponentExample│   │       ├── server-component-example.content.ts│   │       └── ServerComponentExample.tsx│   └── proxy.ts├── intlayer.config.ts├── next.config.ts├── package.json└── tsconfig.json

Nếu bạn không muốn routing theo locale, intlayer có thể được sử dụng như một provider / hook đơn giản. Xem hướng dẫn này để biết thêm chi tiết.

Tạo một tệp cấu hình để xác định các ngôn ngữ cho ứng dụng của bạn:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      // Các locale khác của bạn    ],    defaultLocale: Locales.ENGLISH,  },  routing: {    mode: "search-params", // hoặc `no-prefix` - Hữu ích cho việc phát hiện trong middleware  },};export default config;

Thông qua tệp cấu hình này, bạn có thể thiết lập các URL theo ngôn ngữ, chuyển hướng proxy, tên cookie, vị trí và phần mở rộng của các khai báo nội dung, tắt các log của Intlayer trên console, và nhiều thứ khác. Để xem danh sách đầy đủ các tham số có sẵn, tham khảo tài liệu cấu hình.

Bước 3: Tích hợp Intlayer vào cấu hình Next.js của bạn

Configure your Next.js setup to use Intlayer:

import type { NextConfig } from "next";import { withIntlayer } from "next-intlayer/server";const nextConfig: NextConfig = {  /* các tuỳ chọn cấu hình ở đây */};export default withIntlayer(nextConfig);

Plugin Next.js withIntlayer() được sử dụng để tích hợp Intlayer với Next.js. Nó đảm bảo việc xây dựng các tệp khai báo nội dung và giám sát chúng ở chế độ phát triển. Nó định nghĩa các biến môi trường của Intlayer trong các môi trường Webpack hoặc Turbopack. Ngoài ra, nó cung cấp các alias để tối ưu hiệu năng và đảm bảo tương thích với server components.

Hàm withIntlayer() là một hàm trả về promise. Nó cho phép chuẩn bị các từ điển của intlayer trước khi quá trình build bắt đầu. Nếu bạn muốn sử dụng nó cùng các plugin khác, bạn có thể await nó. Ví dụ:

const nextConfig = await withIntlayer(nextConfig);const nextConfigWithOtherPlugins = withOtherPlugins(nextConfig);export default nextConfigWithOtherPlugins;

Nếu bạn muốn sử dụng nó một cách đồng bộ, bạn có thể dùng hàm withIntlayerSync(). Ví dụ:

const nextConfig = withIntlayerSync(nextConfig);const nextConfigWithOtherPlugins = withOtherPlugins(nextConfig);export default nextConfigWithOtherPlugins;

Intlayer tự động phát hiện dự án của bạn đang sử dụng webpack hay Turbopack dựa trên các cờ dòng lệnh --webpack, --turbo, hoặc --turbopack, cũng như phiên bản Next.js hiện tại của bạn.

Kể từ next>=16, nếu bạn đang sử dụng Rspack, bạn phải ép Intlayer sử dụng cấu hình webpack bằng cách tắt Turbopack:

withRspack(withIntlayer(nextConfig, { enableTurbopack: false }));

Bước 4: Định nghĩa các route động theo locale

Xóa mọi nội dung trong RootLayout và thay thế bằng mã sau:

import type { Metadata } from "next";import type { ReactNode } from "react";import "./globals.css";import { IntlayerClientProvider, LocalPromiseParams } from "next-intlayer";import { getHTMLTextDir, getIntlayer } from "intlayer";import { getLocale } from "next-intlayer/server";export { generateStaticParams } from "next-intlayer";export const generateMetadata = async ({  params,}: LocalPromiseParams): Promise<Metadata> => {  const { locale } = await params;  const { title, description, keywords } = getIntlayer("metadata", locale);  return {    title,    description,    keywords,  };};const RootLayout = async ({  children,}: Readonly<{  children: ReactNode;}>) => {  const locale = await getLocale();  return (    <html lang={locale} dir={getHTMLTextDir(locale)}>      <IntlayerClientProvider defaultLocale={locale}>        <body>{children}</body>      </IntlayerClientProvider>    </html>  );};export default RootLayout;

Bước 5: Khai báo nội dung của bạn

Tạo và quản lý các khai báo nội dung của bạn để lưu trữ các bản dịch:

import { t, type Dictionary } from "intlayer";import { Metadata } from "next";const metadataContent = {  key: "metadata",  content: {    title: t({      vi: "Tiêu đề dự án của tôi",      en: "My Project Title",      fr: "Le Titre de mon Projet",      es: "El Título de mi Proyecto",    }),    description: t({      vi: "Khám phá nền tảng sáng tạo của chúng tôi được thiết kế để đơn giản hóa quy trình làm việc và tăng năng suất.",      en: "Discover our innovative platform designed to streamline your workflow and boost productivity.",      fr: "Découvrez notre plateforme innovante conçue pour simplifier votre flux de travail et booster votre productivité.",      es: "Descubra nuestra plataforma innovadora diseñada para simplificar su flujo de trabajo y aumentar su productividad.",    }),    keywords: t({      vi: ["đổi mới", "năng suất", "quy trình làm việc", "SaaS"],      en: ["innovation", "productivity", "workflow", "SaaS"],      vi: ["đổi mới", "năng suất", "luồng công việc", "SaaS"],      fr: ["innovation", "productivité", "flux de travail", "SaaS"],      es: ["innovación", "productividad", "flujo de trabajo", "SaaS"],    }),  },} as Dictionary<Metadata>;export default metadataContent;

import { t, type Dictionary } from "intlayer";/** @type {import('intlayer').Dictionary<import('next').Metadata>} */const metadataContent = {  key: "metadata",  content: {    title: t({      vi: "Tiêu đề dự án của tôi",      en: "My Project Title",      fr: "Le Titre de mon Projet",      es: "El Título de mi Proyecto",    }),    description: t({      vi: "Khám phá nền tảng sáng tạo của chúng tôi được thiết kế để đơn giản hóa quy trình làm việc và tăng năng suất.",      en: "Discover our innovative platform designed to streamline your workflow and boost productivity.",      vi: "Khám phá nền tảng sáng tạo của chúng tôi được thiết kế để hợp lý hóa luồng công việc của bạn và tăng năng suất.",      fr: "Découvrez notre plateforme innovante conçue pour simplifier votre flux de travail et booster votre productivité.",      es: "Descubra su plataforma innovadora diseñada para simplificar su flujo de trabajo y aumentar su productividad.",    }),    keywords: t({      vi: ["đổi mới", "năng suất", "luồng công việc", "SaaS"],      en: ["innovation", "productivity", "workflow", "SaaS"],      fr: ["innovation", "productivité", "flux de travail", "SaaS"],      es: ["innovación", "productividad", "flujo de trabajo", "SaaS"],    }),  },};export default metadataContent;

import { t, type Dictionary } from "intlayer";const pageContent = {  key: "page",  content: {    getStarted: {      main: t({        vi: "Bắt đầu bằng cách chỉnh sửa",        en: "Get started by editing",        fr: "Commencez par éditer",        es: "Comience por editar",      }),      pageLink: "src/app/page.tsx",    },  },} satisfies Dictionary;export default pageContent;

Các khai báo nội dung của bạn có thể được định nghĩa ở bất kỳ đâu trong ứng dụng của bạn miễn là chúng được đưa vào thư mục contentDir (mặc định, ./src). Và khớp với phần mở rộng tệp khai báo nội dung (mặc định, .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}).

Để biết thêm chi tiết, tham khảo tài liệu khai báo nội dung.

Bước 6: Sử dụng Nội dung trong Mã của Bạn

Truy cập các từ điển nội dung của bạn trong toàn bộ ứng dụng:

import type { FC } from "react";import { ClientComponentExample } from "@components/clientComponentExample/ClientComponentExample";import { ServerComponentExample } from "@components/serverComponentExample/ServerComponentExample";import {  IntlayerServerProvider,  useIntlayer,  getLocale,} from "next-intlayer/server";import { NextPage } from "next";import { headers, cookies } from "next/headers";const PageContent: FC = () => {  const content = useIntlayer("page");  return (    <>      <p>{content.getStarted.main}</p>      <code>{content.getStarted.pageLink}</code>    </>  );};const Page: NextPage = async () => {  const locale = await getLocale();  return (    <IntlayerServerProvider locale={locale}>      <PageContent />      <ServerComponentExample />      <ClientComponentExample />    </IntlayerServerProvider>  );};export default Page;

import type { FC } from "react";import { useIntlayer } from "next-intlayer/server";export const ServerComponentExample: FC = () => {  const content = useIntlayer("server-component-example"); // Tạo khai báo nội dung liên quan  return (    <div>      <h2>{content.title}</h2>      <p>{content.content}</p>    </div>  );};

Nếu bạn muốn sử dụng nội dung của mình trong một thuộc tính string, chẳng hạn như alt, title, href, aria-label, v.v., bạn phải gọi giá trị của hàm, ví dụ:

<img src={content.image.src.value} alt={content.image.value} />

Để tìm hiểu thêm về hook useIntlayer, tham khảo tài liệu.

(Tùy chọn) Bước 7: Cấu hình Proxy để phát hiện locale

Thiết lập proxy để phát hiện locale ưu tiên của người dùng:

export { intlayerProxy as proxy } from "next-intlayer/proxy";export const config = {  matcher:    "/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",};

intlayerProxy được dùng để phát hiện ngôn ngữ ưa thích của người dùng và chuyển hướng họ đến URL phù hợp như được chỉ định trong cấu hình. Ngoài ra, nó còn cho phép lưu ngôn ngữ ưa thích của người dùng vào cookie.

Nếu bạn cần xâu chuỗi nhiều proxy với nhau (ví dụ: intlayerProxy cùng với proxy xác thực hoặc proxy tuỳ chỉnh), Intlayer hiện cung cấp một helper gọi là multipleProxies.

import { multipleProxies, intlayerProxy } from "next-intlayer/proxy";import { customProxy } from "@utils/customProxy";export const proxy = multipleProxies([intlayerProxy, customProxy]);

(Tùy chọn) Bước 8: Thay đổi ngôn ngữ nội dung của bạn

Để thay đổi ngôn ngữ nội dung của bạn trong Next.js, cách được khuyến nghị là sử dụng component Link để chuyển hướng người dùng đến trang đã được địa phương hóa tương ứng. Component Link cho phép prefetch trang, giúp tránh phải tải lại toàn bộ trang.

"use client";import type { FC } from "react";import { Locales, getHTMLTextDir, getLocaleName } from "intlayer";import { useLocale } from "next-intlayer";export const LocaleSwitcher: FC = () => {  const { locale, availableLocales, setLocale } = useLocale({    onChange: () => window.location.reload(),  });  return (    <div>      <button popoverTarget="localePopover">{getLocaleName(locale)}</button>      <div id="localePopover" popover="auto">        {availableLocales.map((localeItem) => (          <button            key={localeItem}            aria-current={locale === localeItem ? "page" : undefined}            onClick={() => setLocale(localeItem)}          >            <span>              {/* Locale - ví dụ: FR */}              {localeItem}            </span>            <span>              {/* Tên ngôn ngữ theo chính locale đó - ví dụ: Français */}              {getLocaleName(localeItem, locale)}            </span>            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>              {/* Tên ngôn ngữ theo locale hiện tại - ví dụ: Francés khi locale hiện tại là Locales.SPANISH */}              {getLocaleName(localeItem)}            </span>            <span dir="ltr" lang={Locales.ENGLISH}>              {/* Ngôn ngữ bằng tiếng Anh - ví dụ: French */}              {getLocaleName(localeItem, Locales.ENGLISH)}            </span>          </button>        ))}      </div>    </div>  );};

Hàm getLocale tuân theo chiến lược phân lớp (cascading) để xác định locale của người dùng:

1. Đầu tiên, nó kiểm tra header của yêu cầu để tìm giá trị locale có thể đã được proxy thiết lập
2. Nếu không tìm thấy locale trong header, nó sẽ tìm locale được lưu trong cookie
3. Nếu không có cookie, nó sẽ cố gắng phát hiện ngôn ngữ ưa thích của người dùng từ cài đặt trình duyệt
4. Trong trường hợp cuối cùng, nó sẽ sử dụng locale mặc định được cấu hình cho ứng dụng

Điều này đảm bảo lựa chọn locale phù hợp nhất dựa trên ngữ cảnh hiện có.

(Tùy chọn) Bước 10: Tối ưu kích thước bundle của bạn

Khi sử dụng next-intlayer, các từ điển (dictionaries) được bao gồm trong bundle cho mọi trang theo mặc định. Để tối ưu kích thước bundle, Intlayer cung cấp một plugin SWC tùy chọn thay thế một cách thông minh các lần gọi useIntlayer bằng các macro. Điều này đảm bảo các từ điển chỉ được đưa vào bundle của những trang thực sự sử dụng chúng.

Để bật tối ưu này, cài đặt gói @intlayer/swc. Khi đã cài, next-intlayer sẽ tự động phát hiện và sử dụng plugin:

npm install @intlayer/swc --save-devnpx intlayer init

Lưu ý: Tối ưu hóa này chỉ có sẵn cho Next.js 13 trở lên.

Lưu ý: Gói này không được cài mặc định vì plugin SWC vẫn đang ở giai đoạn thử nghiệm trên Next.js. Điều này có thể thay đổi trong tương lai.

Lưu ý: Nếu bạn đặt tùy chọn là importMode: 'dynamic' hoặc importMode: 'live', nó sẽ phụ thuộc vào Suspense, vì vậy bạn phải bao bọc các lệnh gọi useIntlayer bằng một boundary Suspense. Điều đó có nghĩa là bạn sẽ không thể sử dụng useIntlayer trực tiếp ở cấp cao nhất của component Page / Layout.

Theo dõi thay đổi từ điển trên Turbopack

Khi sử dụng Turbopack làm development server với lệnh next dev, các thay đổi trong từ điển sẽ không được phát hiện tự động theo mặc định.

Hạn chế này xảy ra vì Turbopack không thể chạy các plugin webpack song song để theo dõi thay đổi trong các tệp nội dung của bạn. Để khắc phục, bạn cần dùng lệnh intlayer watch để chạy đồng thời development server và trình quan sát build của Intlayer.

{  // ... Cấu hình package.json hiện có của bạn  "scripts": {    // ... Cấu hình scripts hiện có của bạn    "dev": "intlayer watch --with 'next dev'",  },}

Nếu bạn đang sử dụng next-intlayer@<=6.x.x, bạn cần giữ flag --turbopack để ứng dụng Next.js 16 hoạt động đúng với Turbopack. Chúng tôi khuyến nghị sử dụng next-intlayer@>=7.x.x để tránh hạn chế này.

Cấu hình TypeScript

Intlayer sử dụng module augmentation để tận dụng lợi ích của TypeScript và làm cho codebase của bạn mạnh mẽ hơn.

Đảm bảo cấu hình TypeScript của bạn bao gồm các kiểu được tạo tự động.

{  // ... Các cấu hình TypeScript hiện có của bạn  "include": [    // ... Các cấu hình TypeScript hiện có của bạn    ".intlayer/**/*.ts", // Bao gồm các kiểu được tạo tự động  ],}

Cấu hình Git

Nên bỏ qua các tệp được Intlayer tạo ra. Điều này giúp bạn tránh commit chúng vào kho Git của mình.

Để làm điều này, bạn có thể thêm các hướng dẫn sau vào tệp .gitignore của mình:

# Bỏ qua các tệp do Intlayer tạo ra.intlayer

Tiện ích mở rộng VS Code

Để cải thiện trải nghiệm phát triển với Intlayer, bạn có thể cài đặt Tiện ích mở rộng Intlayer cho VS Code chính thức.

Cài đặt từ VS Code Marketplace

Tiện ích mở rộng này cung cấp:

• Tự động hoàn thành cho các khóa dịch.
• Phát hiện lỗi theo thời gian thực cho các bản dịch bị thiếu.
• Xem trước trực tiếp của nội dung đã dịch.
• Hành động nhanh để dễ dàng tạo và cập nhật bản dịch.

Để biết chi tiết cách sử dụng extension, tham khảo tài liệu Intlayer VS Code Extension.

Mở rộng

Để mở rộng, bạn có thể triển khai trình soạn thảo trực quan hoặc externalize nội dung của bạn bằng cách sử dụng CMS.