Cea mai bună soluție pentru internaționalizare (i18n) în aplicațiile React

Cum funcționează

Instalați pachetul TacoTranslate prin npm:

npm install tacotranslate

Când ai instalat modulul, va trebui să creezi un cont TacoTranslate, un proiect de traducere și cheile API asociate. Creează-ți un cont aici. Este gratuit și nu este nevoie să adaugi un card de credit.

În interfața aplicației TacoTranslate, creează un proiect și navighează la fila sa de chei API. Creează o cheie read și o cheie read/write. Le vom salva ca variabile de mediu. Cheia read este ceea ce numim public și cheia read/write este secret. De exemplu, le poți adăuga într-un fișier .env în rădăcina proiectului tău.

De asemenea, va trebui să adaugi încă două variabile de mediu: TACOTRANSLATE_DEFAULT_LOCALE și TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Codul implicit al localizării de rezervă. În acest exemplu, îl vom seta la en pentru engleză.
• TACOTRANSLATE_ORIGIN: „dosarul” în care vor fi stocate șirurile tale, cum ar fi URL-ul site-ului tău. Citește mai multe despre origini aici.

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

Asigură-te că nu divulgi niciodată cheia API secretă read/write în mediile de producție pe partea clientului.

Configurarea TacoTranslate

Inițializează TacoTranslate în aplicația ta React prin învelirea aplicației în provider-ul de context 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>
	);
}

Acum puteți folosi componenta Translate oriunde în aplicația dumneavoastră pentru a afișa text tradus! Asigurați-vă că consultați documentația noastră pentru mai multe informații și pentru ghiduri de implementare specifice configurației dumneavoastră.

import {Translate} from 'tacotranslate/react';

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

Avantajele utilizării TacoTranslate

• Economisește timp: Automatizează procesul obositor de localizare și colectare a șirurilor, economisindu-ți timp prețios.
• Eficient din punct de vedere al costurilor: Reduce necesitatea traducerilor manuale, scăzând costurile de localizare.
• Acuratețe îmbunătățită: Traducerile asistate de AI asigură rezultate precise din punct de vedere contextual și de înaltă calitate.
• Soluție scalabilă: Permite adăugarea cu ușurință a suportului pentru limbi noi pe măsură ce aplicația și baza de clienți cresc.

Începe astăzi!

Aplicația dvs. React va fi tradusă automat când adăugați orice șiruri în componenta Translate. Rețineți că numai mediile cu permisiuni read/write pe cheia API vor putea crea șiruri noi ce urmează a fi traduse.

Vă recomandăm să aveți un mediu de testare închis și securizat în care vă puteți testa aplicația de producție, adăugând șiruri noi înainte de a o lansa. Acest lucru va împiedica pe oricine să fure cheia dvs. API secretă și, potențial, să umfle proiectul de traduceri prin adăugarea de șiruri nedorite.

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!