Pages Router kullanan bir Next.js uygulamasında uluslararasılaştırma nasıl uygulanır
React uygulamanızı daha erişilebilir hale getirin ve uluslararasılaştırma (i18n) ile yeni pazarlara ulaşın.
Dünya giderek daha global hale geldikçe, web geliştiricilerin farklı ülkelerden ve kültürlerden gelen kullanıcılara hitap edebilen uygulamalar geliştirmesi giderek daha önemli hale geliyor. Bunu başarmanın ana yollarından biri, uygulamanızı farklı dillere, para birimlerine ve tarih formatlarına uyarlamanızı sağlayan uluslararasılaştırma (i18n) yoludur.
Bu öğreticide, React Next.js uygulamanıza sunucu tarafı render ile nasıl uluslararasılaştırma ekleyeceğimizi keşfedeceğiz. TL;DR: Tam örneği buradan görün.
Bu rehber, Pages Router kullanan Next.js uygulamaları içindir.
Eğer App Router kullanıyorsanız, lütfen onun yerine bu rehbere bakın.
Adım 1: Bir i18n kütüphanesi kurun
Next.js uygulamanızda uluslararasılaştırmayı uygulamak için önce bir i18n kütüphanesi seçeceğiz. Birkaç popüler kütüphane bulunmaktadır, bunlar arasında next-intl de yer alır. Ancak bu örnekte TacoTranslate kullanacağız.
TacoTranslate, en son yapay zeka teknolojisini kullanarak metinlerinizi otomatik olarak herhangi bir dile çevirir ve sizi JSON dosyalarının zahmetli yönetiminden kurtarır.
Terminalinizde npm kullanarak yükleyelim:
npm install tacotranslate
Adım 2: Ücretsiz bir TacoTranslate hesabı oluşturun
Modülü kurduğunuza göre, şimdi TacoTranslate hesabınızı, bir çeviri projesini ve ilgili API anahtarlarını oluşturma zamanı. Buradan bir hesap oluşturun. Ücretsizdir ve kredi kartı eklemenizi gerektirmez.
TacoTranslate uygulama arayüzünde bir proje oluşturun ve API anahtarları sekmesine gidin. Bir tane read
anahtar ve bir tane read/write
anahtar oluşturun. Bunları çevresel değişkenler olarak kaydedeceğiz. read
anahtar, public
olarak adlandırdığımız anahtardır ve read/write
anahtar ise secret
anahtardır. Örneğin, bunları projenizin kök dizinindeki .env
dosyasına ekleyebilirsiniz.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Gizli read/write
API anahtarını asla istemci tarafındaki üretim ortamlarına sızdırmadığınızdan emin olun.
Ayrıca iki tane daha ortam değişkeni ekleyeceğiz: TACOTRANSLATE_DEFAULT_LOCALE
ve TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Varsayılan geri dönüş yerel kodu. Bu örnekte, İngilizce içinen
olarak ayarlayacağız.TACOTRANSLATE_ORIGIN
: Dizelerinizin saklanacağı "klasör", örneğin web sitenizin URL’si. Buradan originler hakkında daha fazla bilgi edinin.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Adım 3: TacoTranslate Kurulumu
TacoTranslate’ı uygulamanızla entegre etmek için, daha önceki API anahtarlarını kullanarak bir istemci oluşturmanız gerekecek. Örneğin, /tacotranslate-client.js
adlı bir dosya oluşturun.
const {default: createTacoTranslateClient} = require('tacotranslate');
const tacoTranslate = createTacoTranslateClient({
apiKey:
process.env.TACOTRANSLATE_SECRET_API_KEY ??
process.env.TACOTRANSLATE_PUBLIC_API_KEY ??
process.env.TACOTRANSLATE_API_KEY ??
'',
projectLocale: process.env.TACOTRANSLATE_DEFAULT_LOCALE ?? '',
});
module.exports = tacoTranslate;
TACOTRANSLATE_API_KEY
değerini kısa süre içinde otomatik olarak tanımlayacağız.
İstemciyi ayrı bir dosyada oluşturmak, daha sonra tekrar kullanmayı kolaylaştırır. Şimdi, özel bir /pages/_app.tsx
kullanarak TacoTranslate
sağlayıcısını ekleyeceğiz.
import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';
type PageProperties = {
origin: Origin;
locale: Locale;
locales: Locale[];
localizations: Localizations;
};
export default function App({Component, pageProps}: AppProps<PageProperties>) {
const {origin, locale, locales, localizations} = pageProps;
return (
<TacoTranslate
client={tacoTranslate}
origin={origin}
locale={locale}
localizations={localizations}
>
<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
<Component {...pageProps} />
</TacoTranslate>
);
}
Eğer zaten özel pageProps
ve _app.tsx
dosyalarınız varsa, lütfen yukarıdaki özellikler ve kod ile tanımı genişletin.
Adım 4: Sunucu tarafı renderlama uygulaması
TacoTranslate, çevirilerinizin sunucu tarafı render edilmesine olanak tanır. Bu, çevrilmiş içeriği hemen göstererek kullanıcı deneyimini büyük ölçüde iyileştirir; böylece önce çevrilmemiş içeriğin kısa süreli görüntülenmesi (flash) gerçekleşmez. Ayrıca, zaten ihtiyacımız olan tüm çevirilere sahip olduğumuz için istemci tarafında ağ isteklerini atlayabiliriz.
Başlayalım, /next.config.js
dosyasını oluşturarak veya değiştirerek.
const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');
module.exports = async () => {
const config = {};
return withTacoTranslate(config, {
client: tacoTranslateClient,
isProduction:
process.env.TACOTRANSLATE_ENV === 'production' ||
process.env.VERCEL_ENV === 'production' ||
(!(process.env.TACOTRANSLATE_ENV || process.env.VERCEL_ENV) &&
process.env.NODE_ENV === 'production'),
});
};
isProduction
kontrolünü kurulumunuza göre değiştirin. Eğer true
ise, TacoTranslate genel API anahtarını gösterecektir. Eğer yerel, test veya staging ortamındaysak (isProduction
is false
), yeni dizelerin çeviri için gönderildiğinden emin olmak için gizli read/write
API anahtarını kullanacağız.
Şu ana kadar, Next.js uygulamasını yalnızca desteklenen diller listesini ayarladık. Sonraki yapacağımız şey, tüm sayfalarınız için çevirileri almak olacak. Bunu yapmak için, gereksinimlerinize bağlı olarak getTacoTranslateStaticProps
veya getTacoTranslateServerSideProps
kullanacaksınız.
Bu fonksiyonlar üç argüman alır: Bir Next.js Static Props Context objesi, TacoTranslate için konfigürasyon ve isteğe bağlı Next.js özellikleri. getTacoTranslateStaticProps
üzerindeki revalidate
özelliğinin varsayılan olarak 60'a ayarlandığını unutmayın, böylece çevirileriniz güncel kalır.
Bu fonksiyonlardan birini bir sayfada kullanmak için, örneğin /pages/hello-world.tsx
gibi bir sayfa dosyanız olduğunu varsayalım.
import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';
export async function getStaticProps(context) {
return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}
export default function Page() {
return <Translate string="Hello, world!"/>;
}
Artık tüm React bileşenlerinizdeki metinleri çevirmek için Translate
bileşenini kullanabilmelisiniz.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
Adım 5: Yayınla ve test et!
İşlem tamam! Artık React uygulamanız, herhangi bir metni Translate
bileşenine eklediğinizde otomatik olarak çevrilecek. API anahtarında read/write
izinlerine sahip olan ortamların, yeni çevrilecek metinler oluşturabileceğini unutmayın. Üretim uygulamanızı böyle bir API anahtarıyla test edebileceğiniz, kapalı ve güvenli bir test ortamı oluşturmanızı öneririz; canlı yayına geçmeden önce yeni metinler ekleyebilirsiniz. Bu, gizli API anahtarınızın çalınmasını engelleyecek ve çeviri projenizin alakasız yeni metinlerle şişmesini önleyecektir.
GitHub profilimizdeki tam örneğe göz atmayı unutmayın. Orada, App Router kullanarak bunu nasıl yapacağınıza dair bir örnek de bulacaksınız! Herhangi bir sorunla karşılaşırsanız, bizimle iletişime geçmekten çekinmeyin, size yardımcı olmaktan memnuniyet duyarız.
TacoTranslate, React uygulamalarınızı 75'ten fazla dile otomatik olarak ve hızlıca yerelleştirmenizi sağlar. Hemen başlayın!