Pages Router kullanan bir Next.js uygulamasında uluslararasılaştırma nasıl uygulanır

Dünya giderek daha küreselleştikçe, web geliştiricilerinin farklı ülkelerden ve kültürlerden kullanıcılara hitap edebilen uygulamalar geliştirmesi giderek daha önemli hale geliyor. Bunu başarmanın temel yollarından biri uluslararasılaştırma (i18n) ile uygulamanızı farklı dillere, para birimlerine ve tarih formatlarına uyarlayabilmektir.

Bu eğitimde, React Next.js uygulamanıza sunucu tarafı render ile uluslararasılaştırmanın nasıl eklenebileceğini inceleyeceğiz. TL;DR: Tam örneği buradan 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ız.

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 vardır. Ancak, bu örnekte TacoTranslate kullanacağız.

TacoTranslate, gelişmiş yapay zeka 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 projesi ve ilgili API anahtarlarını oluşturma zamanı. Buradan 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ı ortam değişkenleri olarak kaydedeceğiz. read anahtarı bizim public dediğimiz anahtardır ve read/write anahtarı ise secret olarak adlandırılır. Örneğin, bu anahtarları projenizin kök dizinindeki .env dosyasına ekleyebilirsiniz.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Gizli read/write API anahtarını istemci tarafı üretim ortamlarına kesinlikle sızdırmamaya dikkat edin.

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üş dili kodu. Bu örnekte, bunu İngilizce için en olarak ayarlayacağız.
• TACOTRANSLATE_ORIGIN: Dizelerinizin saklanacağı “klasör”, örneğin web sitenizin URL’si. Buradan origin’ler hakkında daha fazla bilgi edinin.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Adım 3: TacoTranslate Kurulumu

TacoTranslate’ı uygulamanıza 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 yeniden kullanmayı kolaylaştırır. Şimdi, özel /pages/_app.tsx dosyasını 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 tanımı yukarıdaki özellikler ve kod ile genişletin.

Adım 4: Sunucu tarafı render işleminin uygulanması

TacoTranslate, çevirilerinizin sunucu tarafı render edilmesine olanak tanır. Bu, önce çevrilmemiş içeriğin bir anlığına görüntülenmesi yerine, çevrilmiş içeriğin hemen gösterilmesiyle kullanıcı deneyimini büyük ölçüde iyileştirir. Ayrıca, ihtiyaç duyduğumuz tüm çeviriler elimizde olduğu için istemci tarafında ağ isteklerini atlayabiliriz.

Başlangıç olarak /next.config.js dosyasını oluşturacak veya düzenleyeceğ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.

Ş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! React uygulamanız, artık Translate bileşenine herhangi bir metin eklediğinizde otomatik olarak çevrilecektir. API anahtarında read/write yetkisine sahip ortamların yeni çevrilecek metinler oluşturabileceğini unutmayın. Canlıya geçmeden önce, bu tür bir API anahtarıyla üretim uygulamanızı test edebileceğiniz kapalı ve güvenli bir staging ortamı oluşturmanızı öneririz. Bu, gizli API anahtarınızın çalınmasını önleyecek ve yeni, alakasız metinler eklenerek çeviri projenizin gereksiz yere büyümesini engelleyecektir.

GitHub profilimizdeki tam örneği mutlaka inceleyin. Orada, bu işlemi 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 ve hızlıca yerelleştirmenizi sağlar. Bugün başlayın!