Y datrysiad gorau ar gyfer rhyngwladoli (i18n) mewn apiau React

Sut mae'n gweithio

Gosodwch y pecyn TacoTranslate trwy npm:

npm install tacotranslate

Unwaith y byddwch wedi gosod y modiwl, bydd angen i chi greu cyfrif TacoTranslate, prosiect cyfieithu, a allweddi API cysylltiedig. Creu cyfrif yma. Mae'n rhad ac am ddim, ac nid oes angen i chi ychwanegu cerdyn credyd.

Yn UI'r cais TacoTranslate, creu prosiect a mynd i'r tab allweddi API. Creu un allwedd read a un allwedd read/write. Byddwn yn eu cadw fel newidynnau amgylcheddol. Mae'r allwedd read yr ydym yn ei alw'n public, ac mae'r allwedd read/write yn secret. Er enghraifft, gallech eu hychwanegu at ffeil .env yn wraidd eich prosiect.

Mae hefyd angen i chi ychwanegu dau newidyn amgylchedd ychwanegol: TACOTRANSLATE_DEFAULT_LOCALE a TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Cod lleol diofyn a ddefnyddir fel opsiwn wrth gefn. Yn yr enghraifft hon, byddwn yn ei osod i en ar gyfer Saesneg.
• TACOTRANSLATE_ORIGIN: Y “ffolder” lle caiff eich stringiau eu storio, megis URL eich gwefan. Darllenwch ragor am darddiadau yma.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Gwnewch yn siŵr na fyddwch byth yn datgelu'r allwedd API gyfrinachol read/write i amgylcheddau cynhyrchu ar ochr y cleient.

Sefydlu TacoTranslate

Dechreuwch ddefnyddio TacoTranslate yn eich cais React trwy lapio eich cais yn y ddarparwr cyd-destun TacoTranslate:

import React, {useState} from 'react';
import TacoTranslate, {Translate} from 'tacotranslate/react';

const tacoTranslate = createTacoTranslateClient({
	apiKey: 'YOUR_API_KEY',
});

export default function App() {
	const [locale, setLocale] = useState('en');

	return (
		<TacoTranslate client={tacoTranslate} locale={locale}>
			<Translate string="Hello, world!"/>
		</TacoTranslate>
	);
}

Gallwch nawr ddefnyddio'r cydran Translate unrhyw le yn eich cymhwysiad i arddangos testun wedi'i gyfieithu! Gwnewch yn siŵr i wirio ein dogfennaeth i gael mwy o wybodaeth a chanllawiau gweithredu ar gyfer eich gosodiad.

import {Translate} from 'tacotranslate/react';

export default async function Component() {
	return (
		<Translate string="Hello? This is TacoTranslate speaking." />
	);
}

Manteision defnyddio TacoTranslate

• Arbed amser: Awtomeiddio'r broses ddiflas o leoleiddio a chasglu striniau, gan arbed i chi amser gwerthfawr.
• Cost-effeithiol: Yn lleihau'r angen am gyfieithiadau llaw, gan leihau costau eich lleoleiddio.
• Cywirdeb gwell: Mae cyfieithiadau a gefnogir gan AI yn sicrhau canlyniadau cywir o ran cyd-destun ac o ansawdd uchel.
• Datrysiad graddadwy: Ychwanegu cefnogaeth ar gyfer ieithoedd newydd yn hawdd wrth i'ch cais a'ch sylfaen cwsmeriaid dyfu.

Dechreuwch heddiw!

Bydd eich ap React yn cael ei gyfieithu'n awtomatig pan fyddwch yn ychwanegu unrhyw llinynnau i gydran Translate. Sylwch mai dim ond amgylcheddau sydd â chaniatâd read/write ar yr allwedd API fydd yn gallu creu llinynnau newydd i gael eu cyfieithu.

Rydym yn argymell cael amgylchedd staging caeedig a diogel lle gallwch brofi eich ap cynhyrchu, gan ychwanegu llinynnau newydd cyn mynd yn fyw. Bydd hyn yn atal unrhyw un rhag dwyn eich allwedd API gyfrinachol, ac o bosibl rhag chwyddo eich prosiect cyfieithu drwy ychwanegu llinynnau anhriodol.

Be sure to check out the complete examples over at our GitHub profile. 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. Translate for free!