문서: 모범 사례 – TacoTranslate

모범 사례

Korean

URL을 변수에 넣기

URL이나 유사한 데이터를 포함하는 문자열을 번역할 때는 이러한 URL을 변수에 넣고 템플릿에서 참조하는 것이 좋은 관행입니다.

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

전역 오리진 배열 및 여러 컴포넌트 오리진

이 패턴은 Next.js Pages Router을 사용할 때만 작동합니다.

대형 애플리케이션을 다룰 때는 문자열과 번역을 여러 개의 더 작은 origins로 분할하는 것이 유리합니다. 이 접근 방식은 번들 크기와 전송 시간을 줄여 효율적이고 확장 가능한 로컬라이제이션을 보장합니다.

이는 클라이언트 측에서만 렌더링할 때는 간단하지만, 서버 사이드 렌더링용 번역을 가져올 때는 origins 관리가 빠르게 복잡해집니다. 그러나 TacoTranslate 클라이언트 origins 배열을 사용하면 origin 관리를 자동화할 수 있습니다.

예를 들어, 컴포넌트와 페이지를 별도의 파일로 분리한 이 예제를 살펴보세요.

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});
}

저희 서버 사이드 렌더링 예제에서 getTacoTranslateStaticProps에 대한 자세한 정보를 확인하세요.

오류 처리 및 디버깅

모범 사례

ARIA 레이블 사용

전역 오리진 배열 및 여러 컴포넌트 오리진