Pages Router kullanan bir Next.js uygulamasında uluslararasılaştırma nasıl uygulanır
React uygulamanızı uluslararasılaştırma (i18n) ile daha erişilebilir hale getirin ve yeni pazarlara ulaşın.
Dünya giderek daha fazla küreselleştikçe, web geliştiricilerinin farklı ülkelerden ve kültürlerden gelen kullanıcılara hitap edebilen uygulamalar geliştirmesi giderek daha önemli hale geliyor. Bunu başarmanın temel yollarından biri, uygulamanızı farklı dillere, para birimlerine ve tarih formatlarına uyarlamanızı sağlayan uluslararasılaştırma (i18n) yöntemidir.
Bu öğreticide, React Next.js uygulamanıza sunucu tarafı render ile uluslararasılaştırma nasıl eklenir, inceleyeceğiz. TL;DR: Tam örneği burada görün.
Bu kılavuz, Pages Router kullanan Next.js uygulamaları içindir.
Eğer App Router kullanıyorsanız, lütfen bunun yerine bu kılavuza 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. next-intl dahil olmak üzere birkaç popüler kütüphane vardır. Ancak, bu örnekte TacoTranslate kullanacağız.
TacoTranslate, gelişmiş yapay zeka kullanarak dizelerinizi otomatik olarak istediğiniz dile çevirir ve sizi JSON dosyalarının zahmetli yönetiminden kurtarır.
Terminalinizde npm kullanarak kurulum yapalım:
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 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 de read/write
anahtarı oluşturun. Bunları ortam değişkenleri olarak kaydedeceğiz. read
anahtarı, bizim public
olarak adlandırdığımız anahtardır ve read/write
anahtarı ise secret
anahtardır. Örneğin, bunları projenizin kök dizininde yer alan .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 çevresel değişken daha 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
: Dizelerinizi depolayacağınız “klasör”, örneğin web sitenizin URL’si. Originler hakkında daha fazlasını buradan okuyabilirsiniz.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Adım 3: TacoTranslate'i Kurma
TacoTranslate'ı uygulamanızla entegre etmek için, daha önceki API anahtarlarını kullanarak bir istemci oluşturmanız gerekir. Ö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
yakında 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ı render edilmesine olanak tanır. Bu, çevrilmemiş içeriğin önce yanıp sönmesi yerine, çevrilmiş içeriğin hemen gösterilmesiyle kullanıcı deneyimini büyük ölçüde iyileştirir. Ayrıca, ihtiyacımız olan tüm çeviriler zaten elimizde olduğu için istemci tarafında ağ isteklerini atlayabiliriz.
Başlangıç olarak /next.config.js
dosyasını oluşturacağız veya değiştireceğiz.
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 kurduk. Sonraki yapacağımız ş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 için yapılandırma ve isteğe bağlı Next.js özellikleri. getTacoTranslateStaticProps
üzerindeki revalidate
varsayılan olarak 60 olarak ayarlanmıştır, böylece çevirileriniz güncel kalır.
Her iki fonksiyonu da 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şenleriniz içinde 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!
İşimiz bitti! Artık React uygulamanız, bir Translate
bileşenine herhangi bir metin 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ı ile test edebileceğiniz kapalı ve güvenli bir test ortamı oluşturmanızı öneririz; böylece canlıya geçmeden önce yeni metinler ekleyebilirsiniz. Bu, gizli API anahtarınızın çalınmasını önler ve tercüme projenizin gereksiz, ilgisiz metinlerle şişmesini engeller.
GitHub profilimizdeki tam örneği mutlaka inceleyin. Orada, bunu App Router kullanarak nasıl yapacağınıza dair bir örnek de bulacaksınız! Herhangi bir sorunla karşılaşırsanız, bize ulaşmaktan çekinmeyin, size yardımcı olmaktan memnuniyet duyarız.
TacoTranslate, React uygulamalarınızı 75'ten fazla dile otomatik olarak hızlıca yerelleştirmenizi sağlar. Bugün başlayın!