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 küreselleştikçe, web geliştiricilerinin farklı ülkelerden ve kültürlerden kullanıcıları karşılayabilen uygulamalar oluşturması giderek daha önemli hale geliyor. Bunu başarmanın önemli yollarından biri uluslararasılaştırma (i18n)dır; bu sayede uygulamanızı farklı dillere, para birimlerine ve tarih formatlarına uyarlayabilirsiniz.
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 bunun yerine bu rehbere bakınız.
Adım 1: Bir i18n kütüphanesi yükleyin
Next.js uygulamanızda uluslararasılaştırmayı uygulamak için önce bir i18n kütüphanesi seçeceğiz. Popüler birkaç kütüphane vardır, bunlar arasında next-intl bulunmaktadır. Ancak, bu örnekte TacoTranslate kullanacağız.
TacoTranslate, son teknoloji AI kullanarak stringlerinizi herhangi bir dile otomatik olarak çevirir ve JSON dosyalarının zahmetli yönetiminden sizi kurtarır.
Terminalinizde npm kullanarak yükleyelim:
npm install tacotranslate
Adım 2: Ücretsiz bir TacoTranslate hesabı oluşturun
Modülü yüklediğinize göre, şimdi TacoTranslate hesabınızı, bir çeviri projesi oluşturma ve ilişkili API anahtarlarını oluşturma zamanı. Buradan bir hesap oluşturun. Ücretsizdir ve kredi kartı eklemenizi gerektirmez.
TacoTranslate uygulama arayüzü içinde bir proje oluşturun ve API anahtarları sekmesine gidin. Bir tane read
anahtarı ve bir tane read/write
anahtarı oluşturun. Bunları ortam değişkenleri olarak kaydedeceğiz. read
anahtarına public
diyoruz ve read/write
anahtarı secret
olarak adlandırıyoruz. Ö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ı ü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 yedek yerel kodu. Bu örnekte, İngilizce içinen
olarak ayarlayacağız.TACOTRANSLATE_ORIGIN
: Dizgelerinizin depolanacağı “klasör”, örneğin web sitenizin URL’si. 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
kısa süre içinde otomatik olarak tanımlanacaktır.
İ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>
);
}
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ı render işleminin uygulanması
TacoTranslate, çevirilerinizin sunucu tarafında render edilmesine olanak tanır. Bu, önce çevirilmemiş bir içeriğin kısa bir süre görüntülenmesi yerine, çevrilmiş içeriğin hemen gösterilmesiyle kullanıcı deneyimini büyük ölçüde iyileştirir. Ayrıca, zaten tüm çevirilere sahip olduğumuz için istemcideki ağ isteklerini atlayabiliriz.
Başlayacağız /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.
Şimdiye kadar, Next.js uygulamasını yalnızca desteklenen diller listesiyle yapılandırdık. Yapacağımız bir sonraki şey, tüm sayfalarınız için çevirileri almaktır. Bunu yapmak için ihtiyaçlarınıza bağlı olarak getTacoTranslateStaticProps
veya getTacoTranslateServerSideProps
kullanacaksınız.
Bu fonksiyonlar üç argüman alır: Bir Next.js Static Props Context nesnesi, TacoTranslate yapılandırması ve isteğe bağlı Next.js özellikleri. getTacoTranslateStaticProps
üzerindeki revalidate
değerinin varsayılan olarak 60’a ayarlandığını unutmayın, böylece çevirileriniz güncel kalır.
Bu fonksiyonlardan herhangi birini bir sayfada kullanmak için, diyelim ki /pages/hello-world.tsx
gibi bir sayfa dosyanız var.
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 tamamlandı! React uygulamanız artık herhangi bir metni Translate
bileşenine eklediğinizde otomatik olarak çevrilecektir. 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, açık ve güvenli bir hazırlık (staging) ortamı kullanmanızı öneriyoruz. Bu, gizli API anahtarınızın çalınmasını önleyecek ve proje dışı yeni, ilgisiz metinlerin eklenerek çeviri projenizin şişmesini engelleyecektir.
GitHub profilimizdeki tam örneği incelemeyi unutmayın. Orada, App Router kullanarak bunu nasıl yapacağınıza dair de bir örnek bulacaksınız! Herhangi bir sorunla karşılaşırsanız, lütfen iletişime geçmekten çekinmeyin, size yardımcı olmaktan mutluluk duyarız.
TacoTranslate, React uygulamalarınızı herhangi bir dile ve dilden otomatik olarak hızlıca yerelleştirmenizi sağlar. Bugün başlayın!