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

Cách 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 ứ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à quốc tế hóa (i18n), giúp bạn điều chỉnh ứng dụng của mình theo các ngôn ngữ, đơn vị tiền tệ và định dạng ngày khác nhau.

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách thêm tính năng quốc tế hóa vào ứng dụng React Next.js của bạn, với 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, thay vào đó hãy xem hướng dẫn này.

Bước 1: Cài đặt mộ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 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 npm trong terminal của bạn:

npm install tacotranslate

Bước 2: Tạo 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, 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. 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, tạo một project và chuyển đến tab API keys của nó. Tạo một khóa read và một khóa read/write. Chúng tôi sẽ lưu chúng dưới dạng biến môi trường. Khóa read là cái mà chúng tôi 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 ở thư mục gốc của dự án.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Hãy đảm bảo không bao giờ để lộ khóa API bí mật read/write trong các môi trường production phía client.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Mã locale dự phòng mặc định. Trong ví dụ này, chúng tôi sẽ đặt nó là en cho tiếng Anh.
• TACOTRANSLATE_ORIGIN: “thư mục” nơi các chuỗi của bạn sẽ được lưu trữ, chẳng hạn như URL của trang web của bạn. Đọc thêm về origins ở đâ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ào ứng dụng của bạn, bạn sẽ cần tạo một client bằng cách sử dụng các khóa API đã tạo ở trên. 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ẽ sớm tự động thiết lập TACOTRANSLATE_API_KEY.

Việc tạo client trong một file riêng sẽ giúp dễ sử dụng lại sau này hơn. Bây giờ, sử dụng một /pages/_app.tsx tùy chỉnh, chúng ta sẽ thêm thành phần 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, hãy mở rộng định nghĩa bằng các thuộc tính và đoạn mã ở 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 đã được dịch ngay lập tức, thay vì để xuất hiện một thoáng nội dung chưa được dịch trước đó. Ngoài ra, chúng ta có thể bỏ qua các yêu cầu mạng ở phía máy khách, 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'),
	});
};

Chỉnh sửa kiểm tra isProduction để 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 bạn đang ở môi trường cục bộ, thử nghiệm hoặc staging (isProduction is false), chúng tôi 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 getTacoTranslateStaticProps hoặc getTacoTranslateServerSideProps tùy theo yêu cầu của bạn.

Những hàm này nhận 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 là 60 theo mặc định, để các bản dịch của bạn luôn được cập nhật.

Để sử dụng bất kỳ hàm nào 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 sẽ có thể sử dụng thành phần Translate để dịch các chuỗi trong tất cả các thành phần 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!

Xong! Ứng dụng Next.js của bạn sẽ được dịch tự động khi bạn thêm bất kỳ chuỗi nào vào thành phần Translate. Lưu ý rằng chỉ các 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ị bạn nên có một môi trường staging đóng và được bảo mật, nơi bạn có thể kiểm thử ứng dụng production 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 đưa lên môi trường sống. Điều này sẽ ngăn bất kỳ ai đánh cắp khóa API bí mật của bạn, và có thể làm phình to dự án dịch của bạn bằng cách thêm các chuỗi mới không liên quan.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!