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

Dünya daha da küreselleştikçe, web geliştiricilerinin farklı ülkelerden ve kültürlerden gelen kullanıcıların ihtiyaçlarına cevap verebilen uygulamalar oluşturması giderek daha önemli hale geliyor. Bunu başarmanın temel yollarından biri, uygulamanızı farklı dillere, para birimlerine ve tarih formatlarına uyarlamanıza olanak tanıyan uluslararasılaştırma (i18n)dir.

Bu öğreticide, React Next.js uygulamanıza sunucu tarafı render ile birlikte uluslararasılaştırmayı nasıl ekleyeceğimizi 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ılavuzu inceleyin.

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 de dahil olmak üzere birkaç popüler kütüphane bulunmaktadır. Ancak bu örnekte TacoTranslate kullanacağız.

TacoTranslate, son teknoloji yapay zeka 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ü 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ı 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ı çevresel değişkenler olarak kaydedeceğiz. read anahtarı bizim public dediğimiz anahtar, read/write anahtarı ise secret dediğimiz anahtardı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ı üretim ortamlarına asla sızdırmadığınızdan emin olun.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Varsayılan yedek yerel kodu. Bu örnekte İngilizce için en olarak ayarlayacağız.
• TACOTRANSLATE_ORIGIN: Dizgilerinizin 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'i kurma

Uygulamanıza TacoTranslate'i entegre etmek için, daha önce oluşturduğunuz 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ı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 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, çevirilmemiş içeriğin kısa süreli olarak görünmesi yerine çevrilmiş içeriğin anında gösterilmesi sayesinde kullanıcı deneyimini büyük ölçüde iyileştirir. Ayrıca, gerekli tüm çevirilere zaten sahip olduğumuz için istemci tarafında ağ isteklerini atlayabiliriz.

Başlamak için /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'),
	});
};

Kurulumunuza uygun hale getirmek için isProduction kontrolünü değiştirin. Eğer true, TacoTranslate herkese açık API anahtarını görünür kılacaktır. 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 dillerin bir listesi ile yapılandırdık. Bir sonraki adım, tüm sayfalarınız için çevirileri getirmek olacak. Bunu yapmak için gereksinimlerinize göre getTacoTranslateStaticProps veya getTacoTranslateServerSideProps kullanabilirsiniz.

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. Şunu unutmayın ki getTacoTranslateStaticProps üzerindeki revalidate varsayılan olarak 60'tır, böylece çevirileriniz güncel kalır.

Her iki fonksiyonu da 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 kullanabiliyor olmalısınız.

import {Translate} from 'tacotranslate/react';

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

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

Tamamladık! React uygulamanız, Translate bileşenine herhangi bir metin eklediğinizde artık 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ıyla üretim uygulamanızı test edebileceğiniz, yayına almadan önce yeni metinler ekleyebileceğiniz kapalı ve güvenli bir staging (hazırlık) ortamı bulundurmanızı öneririz. Bu, gizli API anahtarınızın çalınmasını ve yeni, alakasız metinler ekleyerek çeviri projenizin gereksiz yere şişirilmesini önleyecektir.

GitHub profilimizdeki tam örneği mutlaka inceleyin. Orada, bunu App Router kullanarak nasıl yapacağınızı gösteren bir örnek de bulacaksınız! Eğer herhangi bir sorunla karşılaşırsanız, bize ulaşmaktan çekinmeyin; memnuniyetle yardımcı oluruz.

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