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

Dünya giderek daha fazla küreselleştikçe, web geliştiricilerinin farklı ülkelerden ve kültürlerden gelen kullanıcıların ihtiyaçlarına hitap edebilen uygulamalar geliştirmesi giderek daha önemli hale geliyor. Bunu başarmanın kilit yollarından biri, uygulamanızı farklı dillere, para birimlerine ve tarih formatlarına uyarlamanıza olanak tanıyan uluslararasılaştırma (i18n)'dır.

Bu öğreticide, React Next.js uygulamanıza sunucu tarafı render ile nasıl uluslararasılaştırma ekleyeceğimizi inceleyeceğiz. TL;DR: Tam örneği burada görebilirsiniz.

Bu kılavuz, Pages Router kullanan Next.js uygulamaları içindir.
Eğer App Router kullanıyorsanız, lütfen bunun yerine bu kılavuzu inceleyin.

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 var; bunlardan biri next-intl. Ancak bu örnekte TacoTranslate kullanacağız.

TacoTranslate, son teknoloji yapay zekâyı kullanarak metinlerinizi otomatik olarak herhangi bir dile çevirir ve sizi JSON dosyalarının zahmetli yönetiminden kurtarır.

Bunu terminalinizde npm kullanarak yükleyelim:

npm install tacotranslate

Adım 2: Ücretsiz bir TacoTranslate hesabı oluşturun

Modülü artık yüklediğinize göre, TacoTranslate hesabınızı, bir çeviri projesini ve ilişkili API anahtarlarını oluşturmanın zamanı geldi. 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 read anahtarı ve bir read/write anahtarı oluşturun. Bunları ortam değişkenleri olarak kaydedeceğiz. read anahtarı bizim public olarak adlandırdığımız anahtar ve read/write anahtarı secret anahtarıdı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ı istemci tarafındaki üretim ortamlarına asla sızdırmadığınızdan emin olun.

Ayrıca iki ortam değişkeni daha ekleyeceğiz: TACOTRANSLATE_DEFAULT_LOCALE ve TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Varsayılan geri dönüş (fallback) yerel ayar kodu. Bu örnekte bunu İngilizce için en olarak ayarlayacağız.
• TACOTRANSLATE_ORIGIN: Dizelerinizin saklanacağı “klasör”, örneğin web sitenizin URL'si. Origin'ler hakkında daha fazla bilgi edinin.

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

Adım 3: TacoTranslate'yi kurma

TacoTranslate'i uygulamanıza entegre etmek için, daha önce aldığınız 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;

Kısa süre içinde TACOTRANSLATE_API_KEY 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>
	);
}

Zaten özelleştirilmiş pageProps ve _app.tsx varsa, lütfen tanımı yukarıdaki özellikler ve kod ile genişletin.

Adım 4: Sunucu tarafı render'ı uygulama

TacoTranslate, çevirilerinizin sunucu tarafında render edilmesine olanak tanır. Bu, çevrilmemiş içeriğin önce kısa bir süre görünmesi yerine çevirilmiş içeriği hemen göstererek kullanıcı deneyimini büyük ölçüde iyileştirir. Ayrıca, ihtiyacımız olan tüm çeviriler zaten mevcut olduğundan istemcide ağ isteklerini atlayabiliriz.

Başlamak için /next.config.js dosyasını oluşturacak 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'),
	});
};

Kurulumunuza uygun olacak şekilde isProduction kontrolünü değiştirin. Eğer true ise, TacoTranslate genel API anahtarını görünür kılacaktır. Eğer yerel, test veya staging ortamındaysak (isProduction is false), yeni dizgilerin ç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 dillerin bir listesiyle ayarladık. Bir sonraki adım tüm sayfalarınız için çevirileri almaktır. 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 nesnesi, TacoTranslate için yapılandırma ve isteğe bağlı Next.js özellikleri. revalidate’in getTacoTranslateStaticProps üzerinde varsayılan olarak 60’a ayarlı olduğunu unutmayın; böylece çevirileriniz güncel kalır.

Bu fonksiyonlardan herhangi birini bir sayfada kullanmak iç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 dizeleri çevirmek için Translate bileşenini kullanabilmelisiniz.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

Adım 5: Yayınlayın ve test edin!

İşimiz bitti! React uygulamanız artık bir Translate bileşenine herhangi bir dize eklediğinizde otomatik olarak çevrilecek. API anahtarında read/write izinleri olan ortamlarda yalnızca çevrilecek yeni dizeler oluşturulabileceğini unutmayın. Böyle bir API anahtarıyla üretim uygulamanızı test edebileceğiniz kapalı ve güvenli bir staging ortamına sahip olmanızı öneririz; canlıya geçmeden önce yeni dizeleri orada ekleyin. Bu, herhangi birinin herhangi birinin gizli API anahtarınızı çalmasını ve potansiyel olarak yeni, alakasız dizeler ekleyerek çeviri projenizi şişirmesini engelleyecektir.

GitHub profilimizdeki tam örneği mutlaka inceleyin. Orada ayrıca bu işlemin App Router kullanılarak nasıl yapıldığına dair bir örnek de bulacaksınız! Herhangi bir sorunla karşılaşırsanız, bize ulaşmaktan çekinmeyin; size memnuniyetle yardımcı oluruz.

TacoTranslate, React uygulamalarınızı 75'ten fazla dile otomatik ve hızlı bir şekilde yerelleştirmenizi sağlar. Bugün başlayın!