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

Dünya daha küresel hale geldikçe, web geliştiricilerin farklı ülkelerden ve kültürlerden gelen kullanıcıları hedefleyen uygulamalar oluşturmaları giderek daha önemli hale geliyor. Bunu sağlamanın ana yollarından biri, uygulamanızı farklı dillere, para birimlerine ve tarih formatlarına uyarlamanıza olanak tanıyan uluslararasılaştırmadır (i18n).

Bu eğiticide, React Next.js uygulamanıza sunucu tarafı oluşturmayla birlikte uluslararasılaştırmayı nasıl ekleyeceğimizi keşfedeceğ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ı (i18n) uygulamak için önce bir i18n kütüphanesi seçeceğiz. Birkaç popüler kütüphane var, bunlar arasında next-intl. Ancak, bu örnekte TacoTranslate.

TacoTranslate, keskin yapay zeka kullanarak metinlerinizi herhangi bir dile otomatik olarak ç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

Artık modülü kurduğunuza göre, TacoTranslate hesabınızı, bir çeviri projesini ve ilgili API anahtarlarını oluşturma zamanı. Buradan 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 adet read anahtarı ve bir adet 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. Örneğin, bunları projenizin kökünde bir .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 tane daha ortam değişkeni ekleyeceğiz: TACOTRANSLATE_DEFAULT_LOCALE ve TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Varsayılan geri dönüş yerel kodu. Bu örnekte, bunu en olarak İngilizce ayarlayacağız.
• TACOTRANSLATE_ORIGIN: Dizelelerinizin saklanacağı “klasör”, web sitenizin URL'si gibi. Kökenler hakkında daha fazla okuyun.

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, /utilities/tacotranslate.js adında 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;

Yakında TACOTRANSLATE_API_KEY otomatik olarak tanımlanacak.

İstemciyi ayrı bir dosyada oluşturmak, tekrar kullanmayı kolaylaştırır. Şimdi, özel /pages/_app.tsx'yi kullanarak TacoTranslate sağlayıcısını ekleyeceğiz.

import React from 'react';
import {type AppProps} from 'next/app';
import {type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import tacoTranslate from '../utilities/tacotranslate';

type PageProperties = {
	origin: string;
	locale: Locale;
	locales: Locale[];
	localizations: Localizations;
};

export default function App({Component, pageProps}: AppProps<PageProperties>) {
	const {origin, locale, localizations} = pageProps;

	return (
		<TacoTranslate
			client={tacoTranslate}
			origin={origin}
			locale={locale}
			localizations={localizations}
		>
			<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ı rendering'i uygulama

TacoTranslate, çevirilerinizin sunucu tarafında render edilmesine olanak tanır. Bu, önce tercüme edilmemiş içeriğin flaşını göstermek yerine, tercüme edilmiş içeriği hemen göstererek kullanıcı deneyimini büyük ölçüde iyileştirir. Ayrıca, ihtiyaç duyduğumuz tüm çevirilere zaten sahip olduğumuz için, istemcideki ağ isteklerini atlayabiliriz.

İlk olarak /next.config.js dosyasını oluşturacak veya değiştireceğiz.

const tacoTranslate = require('./utilities/tacotranslate');

module.exports = async () => {
	const locales = await tacoTranslate.getLocales();
	const isProduction =
		process.env.TACOTRANSLATE_ENV === 'production' ||
		process.env.VERCEL_ENV === 'production' ||
		(!(process.env.TACOTRANSLATE_ENV || process.env.VERCEL_ENV) &&
			process.env.NODE_ENV === 'production');

	const [projectLocale] = locales;

	return {
		env: {
			TACOTRANSLATE_ORIGIN: process.env.TACOTRANSLATE_ORIGIN,
			TACOTRANSLATE_API_KEY: isProduction
				? process.env.TACOTRANSLATE_PUBLIC_API_KEY
				: process.env.TACOTRANSLATE_SECRET_API_KEY,
			TACOTRANSLATE_DEFAULT_LOCALE: isProduction ? projectLocale : undefined,
		},
		i18n: {
			defaultLocale: projectLocale,
			locales,
		},
	};
};

Burada dikkat etmeniz gereken birkaç şey var. Öncelikle, çeviri projeniz için etkinleştirdiğiniz tüm dilleri alıyoruz. Yanıt dizisindeki ilk dize, proje için belirlediğiniz yerel kodudur.

Şimdi kritik kısmı: Üretim ortamında olup olmadığımıza karar vermek. isProduction kontrolünü yapılandırmanıza uygun olacak şekilde değiştirin. Eğer yerel, test veya aşama ortamındaysak, yeni dizelerin çeviri için gönderilmesini sağlamak adına gizli read/write API anahtarını kullanmalıyız. Eğer bir üretim ortamındaysak, kamusal read anahtarını kullanmalıyız.

Şu ana kadar, Next.js uygulamasını desteklenen dillerin bir listesiyle sadece ayarladık. Şimdi yapacağımız bir sonraki şey, tüm sayalarınız için çevirileri almak. İlk olarak, yeni bir dosya oluşturun /utilities/custom-get-static-props.ts.

import {type GetStaticPropsContext} from 'next';
import {type Origin} from 'tacotranslate';
import tacoTranslate from './tacotranslate';

export default async function customGetStaticProps(
	{
		locale = process.env.TACOTRANSLATE_DEFAULT_LOCALE,
		locales,
	}: GetStaticPropsContext,
	additionalOrigins: Origin[] = []
) {
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const origins = [origin, ...additionalOrigins];
	const localizations = await tacoTranslate.getLocalizations({locale, origins});

	return {
		props: {locale, locales, localizations, origin},
		revalidate: 60,
	};
}

Bu fonksiyon iki argüman alır: Bir Next.js Static Props Context nesnesi ve uygulamanızda birden fazla kaynak kullanıyorsanız, çevirileri almak için ek bir kaynaklar dizisi. Ayrıca, Next.js'in sayfayı 60 saniye sonra yeniden oluşturmasını sağlayan revalidate özelliğini return ifadesinde not edin. Bu, sunucu tarafında oluşturulan çevirilerin güncel kalmasını sağlayacaktır.

Bu fonksiyonu bir sayfada kullanmak için, /pages/hello-world.tsx gibi bir sayfa dosyanız olduğunu varsayalım.

import {Translate} from 'tacotranslate/react';
import customGetStaticProps from '../utilities/custom-get-static-props';

export async function getStaticProps(context) {
	return customGetStaticProps(context);
}

export default function Page() {
	return <Translate string="Hello, world!"/>;
}

Artık tüm React bileşenlerinizdeki stringleri çevirmek için Translate bileşenini kullanabilmeniz gerekir.

import {Translate} from 'tacotranslate/react';

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

Adım 5: Dağıtım yapın ve test edin!

Tamam! Artık React uygulamanız, Translate bileşenine herhangi bir metin eklediğinizde otomatik olarak çevrilecektir. Sadece read/write izinlerine sahip ortamların yeni çevrilecek metinler oluşturabileceğini unutmayın. Üretim uygulamanızı 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, kimsenin gizli API anahtarınızı çalmasını önleyecek ve potansiyel olarak çeviri projenizi yeni, alakasız metinler ekleyerek şişirmesini engelleyecektir.

GitHub profilimizde tam örneği kontrol etmeyi unutmayın. Orada, App Router kullanarak bunu nasıl yapacağınızı gösteren bir örnek de bulacaksınız! Herhangi bir sorunla karşılaşırsanız, lütfen bize ulaşmaktan çekinmeyin, sizi memnuniyetle yardımcı olmaktan mutluluk duyarız.

TacoTranslate, React uygulamalarınızı hızlı bir şekilde her dilden diğerine otomatik olarak yerelleştirmenizi sağlar. Bugün başlayın!