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

Tại sao Intlayer thay thế các lựa chọn thay thế?

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

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

1. 1

   Cài đặt phụ thuộc

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

   bash

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   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.

2. 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:

   bash

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   .├── 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:

   intlayer.config.ts

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   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.

3. 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:

   next.config.ts

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   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ụ:

   ts

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   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ụ:

   ts

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   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:

   ts

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

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

4. 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:

   src/app/layout.tsx

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   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 (): Promise<Metadata> => {
     const locale = await getLocale();
     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;

5. 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:

   src/app/metadata.content.ts

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   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;

   src/app/page.content.ts

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   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,cjs,md,mdx,yaml,yml}).

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

6. 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:

   src/app/page.tsx

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   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;

   src/components/serverComponentExample/ServerComponentExample.tsx

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   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ụ:

   html

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   <img src="{content.image.src.value}" alt="{content.image.value}" /><img src="{content.image.src.toString()}" alt="{content.image.toString()}" /><img src="{String(content.image.src)}" alt="{String(content.image)}" />

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

7. 7

   Cấu hình Proxy để phát hiện locale

   Tùy chọn

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

   src/proxy.ts

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   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.

   ts

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

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

8. 8

   Thay đổi ngôn ngữ nội dung của bạn

   Tùy chọ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.

   src/components/localeSwitcher/LocaleSwitcher.tsx

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   "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();
   
     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ó.

9. 10

   Tối ưu kích thước bundle của bạn

   Tùy chọ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:

   bash

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   npm install @intlayer/swc --save-dev

   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: 'fetch' (in the dictionary configuration), 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.