Tài liệu: Các thực hành tốt nhất

Các thực hành tốt nhất

Vietnamese

Đặt URL vào biến

Khi dịch các chuỗi chứa URL hoặc dữ liệu tương tự, nên đặt các URL này vào trong biến rồi tham chiếu chúng trong các mẫu của bạn được xem là một thực hành tốt.

<Translate
	string={`Click <a href="{{url}}">here</a>`}
	variables={{url: 'https://tacotranslate.com'}}
/>

Khi dịch văn bản của các phần tử tương tác như nút bấm, việc bao gồm các nhãn ARIA là rất quan trọng để đảm bảo khả năng truy cập. Nhãn ARIA giúp trình đọc màn hình cung cấp thông tin mô tả về chức năng của phần tử.

Ví dụ, nếu bạn có một nút cho phép người dùng sao chép văn bản từ một khối mã, bạn có thể sử dụng thuộc tính aria-label để cung cấp một mô tả rõ ràng:

<Translate
	aria-label={useTranslation('Copy to clipboard')}
	string="Copy"
/>

Có điều gì đó về việc này khiến nó cảm thấy rất meta.

Mảng nguồn gốc toàn cầu và nhiều nguồn gốc thành phần

Mẫu này chỉ hoạt động khi sử dụng Next.js Pages Router.

Khi làm việc với các ứng dụng lớn hơn, việc phân tách chuỗi và bản dịch thành nhiều nguồn nhỏ hơn là điều có lợi. Cách tiếp cận này giúp giảm kích thước gói và thời gian truyền tải, đảm bảo việc địa phương hóa hiệu quả và có thể mở rộng.

Mặc dù điều này khá đơn giản khi chỉ kết xuất trên phía client, việc quản lý các nguồn nhanh chóng trở nên phức tạp khi lấy bản dịch cho việc kết xuất phía server. Tuy nhiên, bạn có thể tự động hóa việc quản lý nguồn bằng cách sử dụng mảng origins của client TacoTranslate.

Xem xét ví dụ này, nơi chúng tôi đã tách các thành phần và trang của mình thành các tệp riêng biệt.

components/pricing-table.tsx

import TacoTranslate, {Translate} from 'tacotranslate/react';
import tacoTranslate from '../tacotranslate-client';

// Set an origin name for this component
const origin = 'components/pricing-table';

// Push the origin into the origins array as this file is imported
tacoTranslate.origins.push(origin);

export default function PricingTable() {
	return (
		<TacoTranslate origin={origin}>
			<Translate string="Pricing table" />
			// ...
		</TacoTranslate>
	);
}

pages/pricing.tsx

import TacoTranslate, {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';
import PricingTable from '../components/pricing-table';

const origin = 'pages/pricing';
tacoTranslateClient.origins.push(origin);

export default function PricingPage() {
	return (
		<TacoTranslate origin={origin}>
			<Translate string="Pricing page" />
			<PricingTable />
		</TacoTranslate>
	);
}

// We will now fetch translations for all imported components and their origins automatically
export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

Xem các ví dụ về kết xuất phía máy chủ của chúng tôi để biết thêm thông tin về getTacoTranslateStaticProps.

Xử lý lỗi và gỡ lỗi

Các thực hành tốt nhất

Sử dụng nhãn ARIA

Mảng nguồn gốc toàn cầu và nhiều nguồn gốc thành phần