En iyi uygulamalar
URL'leri değişkenlerde saklayın
URL'ler veya benzeri veriler içeren string'leri çevirirken, bu URL'leri değişkenler içinde yerleştirip ardından şablonlarınızda referans vermek iyi bir uygulama olarak kabul edilir.
<Translate
string={`Click <a href="{{url}}">here</a>`}
variables={{url: 'https://tacotranslate.com'}}
/>ARIA etiketlerini kullanın
Etkileşimli öğelerin, örneğin butonların, metnini çevirirken, erişilebilirliği sağlamak için ARIA etiketlerini eklemek önemlidir. ARIA etiketleri, ekran okuyucuların öğenin işlevi hakkında açıklayıcı bilgiler sunmalarına yardımcı olur.
Örneğin, kullanıcıların bir kod bloğundan metin kopyalamasına izin veren bir butonunuz varsa, net bir açıklama sağlamak için aria-label niteliğini kullanabilirsiniz:
<Translate
aria-label={useTranslation('Copy to clipboard')}
string="Copy"
/>Bunun hakkında bir şeyler çok meta gibi geliyor.
Küresel kökenler dizisi ve birden fazla bileşen kökeni
Bu desen sadece Next.js Pages Router kullanıldığında çalışır.
Daha büyük uygulamalarla çalışırken, dizeleri ve çevirileri birden fazla, daha küçük kaynağa ayırmak faydalıdır. Bu yaklaşım, paket boyutlarını ve transfer sürelerini azaltmaya yardımcı olur, böylece verimli ve ölçeklenebilir yerelleştirme sağlanır.
Bu, yalnızca istemci tarafında işleme alındığında basit olsa da, sunucu tarafı işleme için çeviriler alındığında kaynakları yönetmek hızla karmaşık hale gelir. Ancak, global origins dizisini kullanarak kaynak yönetimini otomatikleştirebilirsiniz.
Aşağıdaki örneği ele alalım; burada bileşenlerimizi ve sayfalarımızı ayrı dosyalara ayırdık.
export const defaultOrigin = process.env.TACOTRANSLATE_ORIGIN;
const origins = [];
export default origins;import TacoTranslate, {Translate} from 'tacotranslate/react';
import origins from '../utilities/tacotranslate-origins';
// Set an origin name for this component
const origin = 'components/pricing-table';
// Push the origin into the origins array as this file is imported
origins.push(origin);
export default function PricingTable() {
return (
<TacoTranslate origin={origin}>
<Translate string="Pricing table" />
// ...
</TacoTranslate>
);
}import TacoTranslate, {Translate} from 'tacotranslate/react';
import origins from '../utilities/tacotranslate-origins';
import PricingTable from '../components/pricing-table';
const origin = 'pages/pricing';
export default function PricingPage() {
return (
<TacoTranslate origin={origin}>
<Translate string="Pricing page" />
<PricingTable />
</TacoTranslate>
);
}
// We can now fetch translations for all imported components and their origins automatically
export async function getStaticProps(context) {
return customGetStaticProps(context, [...origins, origin]);
}Daha fazla bilgi için sunucu tarafı render örneklerimize bakın customGetStaticProps.