Next.js uygulamanızda Pages Router kullanarak uluslararasılaştırmayı (i18n) nasıl uygulayabilirsiniz

Dünya daha küresel hale geldikçe, web geliştiricilerinin farklı ülkelerden ve kültürlerden kullanıcıları hedefleyen uygulamalar geliştirmesi giderek daha önemli hale geliyor. Bunu başarmanın ana yollarından biri, uygulamanızı farklı diller, para birimleri ve tarih formatlarına uyacak şekilde uyarlamanızı sağlayan uluslararasılaşma (i18n) yöntemidir.

Bu eğitime, React Next.js uygulamanıza sunucu tarafı oluşturma ile uluslararasılaşmayı nasıl ekleyeceğimizi keşfedeceğ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ılavuza bakın.

Adım 1: Bir i18n kütüphanesi kurun

Next.js uygulamanızda uluslararasılaşmayı uygulamak için önce bir i18n kütüphanesi seçeceğiz. Birçok popüler kütüphane var, bunlar arasında next-intl. Ancak, bu örnekte TacoTranslate.

TacoTranslate, dizelerinizi son teknoloji AI kullanarak herhangi bir dile otomatik olarak çevirir ve sizi JSON dosyalarının sıkıcı yönetiminden kurtarır.

Bunu terminalinizde npm kullanarak kuralım:

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 projesi oluşturma ve ilgili API anahtarlarını alma zamanı. Buradan bir hesap oluşturun. Ücretsizdir ve kredi kartı eklemenizi gerektirmez.

TacoTranslate uygulaması kullanıcı 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ına public diyoruz ve read/write anahtarı ise secret olarak adlandırılıyor. Örneğin, bunları projenizin kökünde bir .env dosyasına ekleyebilirsiniz.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

İki 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, İngilizce için en olarak ayarlayacağız.
• TACOTRANSLATE_ORIGIN: Dize'lerinizin saklanacağı “klasör”, örneğin web sitenizin URL'si. Kökler hakkında daha fazla bilgi için burayı okuyun.

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

Adım 3: TacoTranslate Kurulumu

TacoTranslate'i 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;

Kısa süre içinde TACOTRANSLATE_API_KEY otomatik olarak tanımlanacak.

Müşteriyi ayrı bir dosyada oluşturmak, daha sonra 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 yukarıdaki özellikler ve kod ile tanımı genişletin.

Adım 4: Sunucu tarafı render işlemini uygulamak

TacoTranslate, çevirilerinizin sunucu tarafında işlenmesine olanak tanır. Bu, çevrilmiş içeriği hemen göstererek kullanıcı deneyimini büyük ölçüde iyileştirir; bu sayede önce çevrilmemiş içeriğin kısa bir süre görünmesi engellenir. Ayrıca, gerekli tüm çevirilere sahip olduğumuz için istemci üzerinde ağ isteklerini atlayabiliriz.

/next.config.js dosyasını oluşturmak veya değiştirmekle başlayacağız.

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 dikkate almanız 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 ayarladığınız yerel kodudur.

Şimdi kritik kısma geliyoruz: Üretim ortamında olup olmadığımıza karar vermek. isProduction kontrolünü kurulumunuza uyacak şekilde değiştirin. Yerel, test veya aşama ortamındaysak, yeni dizelerin çevrilmesi için gizli read/write API anahtarını kullanmalıyız. Üretim ortamındaysak, kamusal read anahtarını kullanmalıyız.

Şu ana kadar, Next.js uygulamasını desteklenen dillerin bir listesini ayarladık. Şimdi yapacağımız şey, tüm sayfalarınız için çevirileri almak. Öncelikle, 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 işlev iki argüman alır: Bir Next.js Static Props Context nesnesi ve uygulamanızda birden fazla kullanıyorsanız çevirileri almak için ek kaynakların isteğe bağlı bir dizisi. Ayrıca, Next.js'e sayfayı 60 saniye sonra yeniden oluşturmasını söyleyen revalidate özelliği ile return ifadesine dikkat edin. Bu, sunucu tarafından oluşturulan çevirilerin güncel kalmasını sağlar.

Bu işlevi 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şenlerinizde dizeleri çevirmek için Translate bileşenini kullanabilmeniz gerekiyor.

import {Translate} from 'tacotranslate/react';

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

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

Tamamdır! Artık React uygulamanız, herhangi bir dizeyi Translate bileşenine eklediğinizde otomatik olarak çevrilecek. Yalnızca API anahtarında read/write izinlerine sahip ortamların yeni çevirilecek dizeler oluşturabileceğini unutmayın. Üretim uygulamanızı test edebileceğiniz kapalı ve güvenli bir aşama ortamına sahip olmanızı öneririz; böylece canlıya geçmeden önce yeni dizeler ekleyebilirsiniz. Bu, kimsenin gizli API anahtarınızı çalmasını engeller ve çeviri projenize yeni, alakasız dizeler ekleyerek büyümesini önler.

Kesinlikle tam örneği kontrol edin GitHub profilimizde. Orada, App Router kullanarak bunu nasıl yapacağınıza dair bir örnek de bulacaksınız! Herhangi bir sorunla karşılaşırsanız, lütfen ulaşmaktan çekinmeyin, size yardımcı olmaktan mutluluk duyarız.

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