Next.js uygulamanızda Pages Router kullanan uluslararasılaştırmayı nasıl uygulayabilirsiniz

Dünya daha küreselleştikçe, web geliştiricilerinin farklı ülkelerden ve kültürlerden gelen kullanıcılara hitap edebilen uygulamalar oluşturması giderek daha önemli hale geliyor. Bunu başarmanın ana yollarından biri, uygulamanızı farklı dillere, para birimlerine ve tarih formatlarına uyarlamanızı sağlayan uluslararasılaştırma (i18n)dır.

Bu eğitimde, React Next.js uygulamanıza sunucu tarafı render'ı ile uluslararasılaştırmayı nasıl ekleyeceğimizi keşfedeceğiz. TL;DR: Tam örneği burada görüntüleyin.

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 göz atın.

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

Next.js uygulamanızda uluslararasılaştırma (i18n) uygulamak için önce bir i18n kütüphanesi seçeceğiz. Birkaç popüler kütüphane bulunmaktadır, bunlardan biri next-intl. Ancak bu örnekte, TacoTranslate.

TacoTranslate, keskin AI teknolojileri kullanarak dize çevirilerini otomatik olarak herhangi bir dile çevirir ve sizi JSON dosyalarının sıkıcı yönetiminden kurtarır.

Bunu terminalinizde npm kullanarak yükleyelim:

npm install tacotranslate

Aşama 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ı. Hesap oluşturun. Bu ü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ı, public olarak adlandırdığımız anahtar ve read/write anahtarı ise secret olarak adlandırdığımız anahtardır. Ö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.

İ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, bunu en olarak İngilizce ayarlayacağız.
• TACOTRANSLATE_ORIGIN: Dize'lerinizin saklanacağı “k klasörü”, web sitenizin URL'si gibi. Kökenler hakkında daha fazla bilgi edinin.

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

Adım 3: TacoTranslate'i ayarlama

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ıyla 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.

Müşteri dosyayı 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'ı uygulama

TacoTranslate, çevirilerinizin sunucu tarafında işlenmesine olanak tanır. Bu, çevrimiçi içerik yerine, hemen çevrilmiş içeriği göstererek kullanıcı deneyimini büyük ölçüde iyileştirir. Ayrıca, istemcideki ağ isteklerini atlayabiliriz çünkü ihtiyacımız olan tüm çevirilere zaten sahibiz.

/next.config.js dosyasını oluşturma veya değiştirme ile 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 belirlediğiniz yerel kodudur.

Şimdi kritik kısma geliyoruz: Prodüksiyon ortamında olup olmadığımıza karar vermek. isProduction kontrolünü kurulumunuza uygun şekilde değiştirin. Eğer yerel, test veya staging ortamındaysak, yeni dizelerin çeviri için gönderildiğinden emin olmak için gizli read/write API anahtarını kullanmalıyız. Eğer bir prodüksiyon ortamındaysak, genel read anahtarını kullanmalıyız.

Şu ana kadar, Next.js uygulamasını yalnızca desteklenen dillerin bir listesiyle kurduk. Şimdi yapacağımız ş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 kullanıyorsanız, çevirileri almak için ek kökenlerin opsiyonel bir dizisi. Ayrıca, Next.js'e sayfayı 60 saniye sonra yeniden oluşturması gerektiğini bildiren return ifadesindeki revalidate özellikini not edin. Bu, sunucu tarafında oluşturulan çevirilerin güncel kalmasını sağlar.

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ş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: Yayınla ve test et!

Tamamladık! React uygulamanız artık herhangi bir stringi Translate bileşenine eklediğinizde otomatik olarak çevrilecektir. Yalnızca API anahtarında read/write izinlerine sahip ortamlarda yeni çevrilecek stringler oluşturulabileceğini unutmayın. Canlıya geçmeden önce yeni stringler ekleyerek böyle bir API anahtarıyla üretim uygulamanızı test edebileceğiniz kapalı ve güvenli bir staging ortamı oluşturmanızı öneririz. Bu, kimseye gizli API anahtarınızı çalma fırsatı vermeyecek ve yeni, ilgisiz stringler ekleyerek çeviri projenizin gereksiz yere büyümesini engelleyecektir.

Kesinlikle tam örneği gözden geçirdiğinizden emin olun GitHub profilimizde. Orada, bunu App Router kullanarak nasıl yapacağınızla ilgili bir örnek de bulacaksınız! Herhangi bir sorunla karşılaşırsanız, lütfen ulaşmaktan çekinmeyin ve size yardımcı olmaktan mutluluk duyarız.

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