Next.js uygulamasında Pages Router kullanan bir uluslararasılaşma 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, uygulamanızı farklı dillere, para birimlerine ve tarih formatlarına uyarlamanızı sağlayan uluslararasılaştırma (i18n) yöntemidir.

Bu eğitimde, React Next.js uygulamanıza sunucu tarafı render ile uluslararasılaştırmanın nasıl ekleneceğini inceleyeceğiz. TL;DR: Tam örneği burada görebilirsiniz.

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ı (i18n) uygulamak için önce bir i18n kütüphanesi seçeceğiz. next-intl dahil olmak üzere birkaç popüler kütüphane mevcut. Ancak, bu örnekte TacoTranslate kullanacağız.

TacoTranslate, en son yapay zeka teknolojisi ile dizelerinizi herhangi bir dile otomatik olarak ç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ü yüklediğinize göre, şimdi TacoTranslate hesabınızı, bir çeviri projesi ve ilgili API anahtarlarını oluşturma zamanı. Buradan bir hesap oluşturun. Ücretsizdir ve kredi kartı eklemeniz gerekmez.

TacoTranslate uygulama arayüzü içinde bir proje oluşturun ve API anahtarları sekmesine gidin. Bir tane read anahtarı, bir tane de read/write anahtarı oluşturun. Bunları ortam değişkenleri olarak kaydedeceğiz. read anahtarı, public olarak adlandırdığımız anahtar, read/write anahtarı ise secret olarak isimlendirilir. Ö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ı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 yedek yerel ayar kodu. Bu örnekte, İngilizce için en olarak ayarlayacağız.
• TACOTRANSLATE_ORIGIN: Metinlerinizin depolanacağı “klasör”, örneğin web sitenizin URL’si. Kökenler 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 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>
	);
}

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ı render'ı uygulama

TacoTranslate, çevirilerinizin sunucu tarafı render edilmesine olanak tanır. Bu, kullanıcı deneyimini büyük ölçüde iyileştirir; çünkü önce çevrilmemiş içeriğin kısa bir şekilde görünmesi yerine, çevrilmiş içerik hemen gösterilir. Ayrıca, gerekli tüm çevirilere zaten sahip olduğumuz 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.

Şimdiye kadar, Next.js uygulamasını sadece desteklenen diller listesi ile kurduk. 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 yapılandırması 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, diyelim ki elinizde /pages/hello-world.tsx gibi bir sayfa dosyası 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 tamam! Artık React uygulamanızda 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. Böyle bir API anahtarı ile üretim uygulamanızı test edebileceğiniz kapalı ve güvenli bir ara ortam bulundurmanızı öneririz; canlıya almadan önce yeni metinler ekleyebilirsiniz. Bu, gizli API anahtarınızın çalınmasını engeller ve çeviri projenizin alakasız yeni metinlerle gereksiz yere şişmesini önler.

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, çekinmeden iletişime geçin, size yardımcı olmaktan memnuniyet duyarız.

TacoTranslate, React uygulamalarınızı hızlıca ve otomatik olarak herhangi bir dile ve dilden yerelleştirmenizi sağlar. Bugün başlamaya ne dersiniz!