Giải pháp tốt nhất cho việc quốc tế hóa (i18n) trong các ứng dụng Next.js

Cách thức hoạt động

Khi thế giới ngày càng toàn cầu hóa, việc các nhà phát triển web xây dựng các ứng dụng có thể phục vụ người dùng từ các quốc gia và nền văn hóa khác nhau trở nên càng quan trọng hơn. Một trong những cách chính để đạt được điều này là thông qua quốc tế hóa (i18n), cho phép bạn điều chỉnh ứng dụng của mình phù hợp với các ngôn ngữ, loại tiền tệ và định dạng ngày tháng khác nhau.

Trong hướng dẫn này, chúng ta sẽ khám phá cách thêm quốc tế hóa vào ứng dụng React Next.js của bạn, với việc kết xuất phía máy chủ. TL;DR: Xem ví dụ đầy đủ tại đây.

Hướng dẫn này dành cho các ứng dụng Next.js đang sử dụng Pages Router.
Nếu bạn đang sử dụng App Router, vui lòng xem hướng dẫn này thay thế.

Bước 1: Cài đặt thư viện i18n

Để triển khai quốc tế hóa trong ứng dụng Next.js của bạn, trước tiên chúng ta sẽ chọn một thư viện i18n. Có một số thư viện phổ biến, bao gồm next-intl. Tuy nhiên, trong ví dụ này, chúng ta sẽ sử dụng TacoTranslate.

TacoTranslate tự động dịch các chuỗi của bạn sang bất kỳ ngôn ngữ nào bằng cách sử dụng AI tiên tiến, và giải phóng bạn khỏi việc quản lý tẻ nhạt các tệp JSON.

Hãy cài đặt nó bằng cách sử dụng npm trong terminal của bạn:

npm install tacotranslate

Bước 2: Tạo một tài khoản TacoTranslate miễn phí

Bây giờ bạn đã cài đặt module, đã đến lúc tạo tài khoản TacoTranslate của bạn, một dự án dịch thuật, và các khóa API liên quan. Tạo tài khoản tại đây. Hoàn toàn miễn phí, và không yêu cầu bạn phải thêm thẻ tín dụng.

Trong giao diện ứng dụng TacoTranslate, hãy tạo một dự án và điều hướng đến tab khóa API của nó. Tạo một khóa read và một khóa read/write. Chúng ta sẽ lưu chúng dưới dạng biến môi trường. Khóa read là cái mà chúng ta gọi là public và khóa read/write là secret. Ví dụ, bạn có thể thêm chúng vào một tệp .env nằm trong thư mục gốc của dự án.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Hãy chắc chắn rằng không bao giờ để lộ khóa API bí mật read/write ra môi trường sản xuất phía client.

Chúng tôi cũng sẽ thêm hai biến môi trường nữa: TACOTRANSLATE_DEFAULT_LOCALE và TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Mã ngôn ngữ dự phòng mặc định. Trong ví dụ này, chúng tôi sẽ đặt là en cho tiếng Anh.
• TACOTRANSLATE_ORIGIN: “Thư mục” nơi chuỗi của bạn sẽ được lưu trữ, chẳng hạn như URL của trang web bạn. Đọc thêm về origins tại đây.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Bước 3: Thiết lập TacoTranslate

Để tích hợp TacoTranslate với ứng dụng của bạn, bạn sẽ cần tạo một client sử dụng các khóa API đã có từ trước. Ví dụ, tạo một tệp có tên /tacotranslate-client.js.

const {default: createTacoTranslateClient} = require('tacotranslate');

const tacoTranslate = createTacoTranslateClient({
	apiKey:
		process.env.TACOTRANSLATE_SECRET_API_KEY ??
		process.env.TACOTRANSLATE_PUBLIC_API_KEY ??
		process.env.TACOTRANSLATE_API_KEY ??
		'',
	projectLocale: process.env.TACOTRANSLATE_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

Chúng tôi sẽ tự động định nghĩa TACOTRANSLATE_API_KEY trong thời gian ngắn.

Tạo client trong một file riêng sẽ giúp dễ dàng sử dụng lại sau này. Bây giờ, sử dụng một /pages/_app.tsx tùy chỉnh, chúng ta sẽ thêm nhà cung cấp TacoTranslate.

import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';

type PageProperties = {
	origin: Origin;
	locale: Locale;
	locales: Locale[];
	localizations: Localizations;
};

export default function App({Component, pageProps}: AppProps<PageProperties>) {
	const {origin, locale, locales, localizations} = pageProps;

	return (
		<TacoTranslate
			client={tacoTranslate}
			origin={origin}
			locale={locale}
			localizations={localizations}
		>
			<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
			<Component {...pageProps} />
		</TacoTranslate>
	);
}

Nếu bạn đã có pageProps và _app.tsx tùy chỉnh, vui lòng mở rộng định nghĩa với các thuộc tính và mã từ phần trên.

Bước 4: Triển khai kết xuất phía máy chủ

TacoTranslate cho phép kết xuất phía máy chủ cho các bản dịch của bạn. Điều này cải thiện đáng kể trải nghiệm người dùng bằng cách hiển thị nội dung đã dịch ngay lập tức, thay vì trước đó là một khoảnh khắc nội dung chưa được dịch. Ngoài ra, chúng ta có thể bỏ qua các yêu cầu mạng trên phía client, vì chúng ta đã có tất cả các bản dịch cần thiết.

Chúng ta sẽ bắt đầu bằng cách tạo hoặc sửa đổi /next.config.js.

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = {};

	return withTacoTranslate(config, {
		client: tacoTranslateClient,
		isProduction:
			process.env.TACOTRANSLATE_ENV === 'production' ||
			process.env.VERCEL_ENV === 'production' ||
			(!(process.env.TACOTRANSLATE_ENV || process.env.VERCEL_ENV) &&
				process.env.NODE_ENV === 'production'),
	});
};

Sửa đổi kiểm tra isProduction cho phù hợp với thiết lập của bạn. Nếu true, TacoTranslate sẽ hiển thị khóa API công khai. Nếu chúng ta đang ở trong môi trường cục bộ, thử nghiệm hoặc dàn dựng (isProduction is false), chúng ta sẽ sử dụng khóa API bí mật read/write để đảm bảo các chuỗi mới được gửi để dịch.

Cho đến nay, chúng ta chỉ mới thiết lập ứng dụng Next.js với một danh sách các ngôn ngữ được hỗ trợ. Việc tiếp theo chúng ta sẽ làm là lấy bản dịch cho tất cả các trang của bạn. Để làm điều đó, bạn sẽ sử dụng hoặc getTacoTranslateStaticProps hoặc getTacoTranslateServerSideProps dựa trên yêu cầu của bạn.

Các hàm này nhận vào ba đối số: Một đối tượng Next.js Static Props Context, cấu hình cho TacoTranslate, và các thuộc tính tùy chọn của Next.js. Lưu ý rằng revalidate trên getTacoTranslateStaticProps được đặt mặc định là 60, để bản dịch của bạn luôn được cập nhật mới.

Để sử dụng một trong hai hàm trong một trang, giả sử bạn có một tệp trang như /pages/hello-world.tsx.

import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';

export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

export default function Page() {
	return <Translate string="Hello, world!"/>;
}

Bây giờ bạn nên có thể sử dụng Translate component để dịch các chuỗi trong tất cả các component React của bạn.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

Bước 5: Triển khai và kiểm tra!

Chúng ta đã xong! Ứng dụng Next.js của bạn bây giờ sẽ được dịch tự động khi bạn thêm bất kỳ chuỗi nào vào một Translate component. Lưu ý rằng chỉ những môi trường có quyền read/write trên khóa API mới có thể tạo các chuỗi mới để dịch. Chúng tôi khuyến nghị có một môi trường staging đóng và an toàn, nơi bạn có thể thử nghiệm ứng dụng sản xuất của mình với một khóa API như vậy, thêm các chuỗi mới trước khi chính thức ra mắt. Điều này sẽ ngăn ngừa việc ai đó đánh cắp khóa API bí mật của bạn, và có thể làm dự án dịch của bạn phình to do thêm các chuỗi mới không liên quan.

Hãy chắc chắn xem ví dụ hoàn chỉnh trên hồ sơ GitHub của chúng tôi. Ở đó, bạn cũng sẽ tìm thấy một ví dụ về cách làm điều này sử dụng App Router ! Nếu bạn gặp bất kỳ vấn đề nào, đừng ngần ngại liên hệ, và chúng tôi sẽ rất vui được giúp đỡ bạn.

TacoTranslate cho phép bạn tự động địa phương hóa các ứng dụng React một cách nhanh chóng sang và từ bất kỳ ngôn ngữ nào. Bắt đầu ngay hôm nay!