Next.js کی ایسی ایپلیکیشن میں جہاں App Router استعمال ہو، بین الاقوامیت (internationalization) کیسے نافذ کی جائے

جیسا کہ دنیا مزید عالمی ہوتی جا رہی ہے، ویب ڈیولپرز کے لیے یہ زیادہ اہم ہو گیا ہے کہ وہ ایسی ایپلیکیشنز بنائیں جو مختلف ممالک اور ثقافتوں کے صارفین کی ضروریات کو پورا کر سکیں۔ اس کا ایک اہم طریقہ بین الاقوامیت (i18n) ہے، جو آپ کو اپنی ایپلیکیشن کو مختلف زبانوں، کرنسیوں، اور تاریخ کے فارمیٹس کے مطابق ڈھالنے کی اجازت دیتا ہے۔

اس مضمون میں، ہم یہ جانیں گے کہ اپنے React Next.js ایپلیکیشن میں بین الاقوامیت کو سرور سائیڈ رینڈرنگ کے ساتھ کیسے شامل کیا جائے۔ TL;DR: پورا نمونہ یہاں دیکھیں۔

یہ رہنمائی Next.js ایپلیکیشنز کے لیے ہے جو App Router استعمال کر رہی ہیں۔
اگر آپ Pages Router استعمال کر رہے ہیں، تو اس کی بجائے یہ رہنمائی دیکھیں۔

مرحلہ 1: ایک i18n لائبریری انسٹال کریں

اپنی Next.js ایپلیکیشن میں بین الاقوامیت (internationalization) کو نافذ کرنے کے لیے، ہم سب سے پہلے ایک i18n لائبریری منتخب کریں گے۔ کئی مشہور لائبریریاں موجود ہیں، جن میں next-intl شامل ہے۔ تاہم، اس مثال میں، ہم TacoTranslate استعمال کریں گے۔

TacoTranslate جدید ترین AI کا استعمال کرتے ہوئے آپ کے اسٹرنگز کو خود بخود کسی بھی زبان میں ترجمہ کرتا ہے، اور آپ کو JSON فائلوں کے بور انتظام سے آزاد کرتا ہے۔

آئیے اسے اپنے ٹرمینل میں npm کے ذریعے انسٹال کرتے ہیں:

npm install tacotranslate

قدم 2: ایک مفت TacoTranslate اکاؤنٹ بنائیں

اب جب کہ آپ نے ماڈیول انسٹال کر لیا ہے، تو وقت ہے کہ آپ اپنا TacoTranslate اکاؤنٹ بنائیں، ایک ترجمے کا پروجیکٹ شروع کریں، اور متعلقہ API کیز بنائیں۔ یہاں اکاؤنٹ بنائیں۔ یہ مفت ہے، اور آپ کو کریڈٹ کارڈ شامل کرنے کی ضرورت نہیں ہے۔

TacoTranslate ایپلیکیشن UI میں، ایک پروجیکٹ بنائیں، اور اس کے API keys ٹیب پر جائیں۔ ایک read کی اور ایک read/write کی بنائیں۔ ہم انہیں environment variables کے طور پر محفوظ کریں گے۔ read کی کو ہم public کہتے ہیں اور read/write کی کو secret کہتے ہیں۔ مثال کے طور پر، آپ انہیں اپنے پروجیکٹ کی روٹ میں .env فائل میں شامل کر سکتے ہیں۔

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

یقینی بنائیں کہ کبھی بھی خفیہ read/write API کی کلائنٹ سائڈ پروڈکشن ماحول میں لیک نہ ہو۔

ہم دو مزید انوائرنمنٹ ویریبلز بھی شامل کریں گے: TACOTRANSLATE_DEFAULT_LOCALE اور TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: ڈیفالٹ فال بیک لوکیل کوڈ۔ اس مثال میں، ہم اسے انگریزی کے لیے en پر سیٹ کریں گے۔
• TACOTRANSLATE_ORIGIN: وہ "فولڈر" جہاں آپ کی سٹرنگز محفوظ ہوں گی، جیسے کہ آپ کی ویب سائٹ کا URL۔ یہاں اور معلومات حاصل کریں۔

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

مرحلہ 3: TacoTranslate کی ترتیب کرنا

اپنی ایپلیکیشن کے ساتھ TacoTranslate کو انٹیگریٹ کرنے کے لیے، آپ کو پہلے سے موجود API کیز استعمال کرتے ہوئے ایک کلائنٹ بنانا ہوگا۔ مثال کے طور پر، /tacotranslate-client.js نامی فائل بنائیں۔

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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

ہم خود بخود TACOTRANSLATE_API_KEY اور TACOTRANSLATE_PROJECT_LOCALE جلد ہی متعین کریں گے۔

کلائنٹ کو ایک مختلف فائل میں بنانا اسے بعد میں دوبارہ استعمال کرنا آسان بنا دیتا ہے۔ getLocales محض ایک مددگار فنکشن ہے جس میں کچھ اندرونی ایرر ہینڈلنگ شامل ہے۔ اب، /app/[locale]/tacotranslate.tsx نامی فائل بنائیں، جہاں ہم TacoTranslate پرووائیڈر کو نافذ کریں گے۔

'use client';

import React, {type ReactNode} from 'react';
import {
	type TranslationContextProperties,
	TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslateClient}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

نوٹ کریں 'use client'; جو ظاہر کرتا ہے کہ یہ ایک کلائنٹ کمپونینٹ ہے۔

اب جب کہ کانٹیکسٹ پرووائیڈر تیار ہے، ایک فائل بنائیں جس کا نام /app/[locale]/layout.tsx ہو، جو ہماری ایپلیکیشن میں روٹ لے آؤٹ ہے۔ نوٹ کریں کہ اس راستے میں ایک فولڈر شامل ہے جو Dynamic Routes استعمال کرتا ہے، جہاں [locale] متحرک پیرامیٹر ہے۔

import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';

export async function generateStaticParams() {
	const locales = await tacoTranslateClient.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: Promise<{locale: Locale}>;
	readonly children: ReactNode;
};

export default async function RootLayout({params, children}: RootLayoutParameters) {
	const {locale} = await params;
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const localizations = await tacoTranslateClient.getLocalizations({
		locale,
		origins: [origin /* , other origins to fetch */],
	});

	return (
		<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					{children}
				</TacoTranslate>
			</body>
		</html>
	);
}

یہاں سب سے پہلی بات جو نوٹ کرنے والی ہے وہ یہ ہے کہ ہم اپنے Dynamic Route پیرامیٹر [locale] کا استعمال کر رہے ہیں تاکہ اُس زبان کی تراجم حاصل کی جا سکیں۔ مزید برآں، generateStaticParams یہ یقینی بنا رہا ہے کہ آپ کے پروجیکٹ کے تمام فعال لوکیل کوڈز پیشگی رینڈر کیے جائیں۔

اب، آئیے اپنا پہلا صفحہ بنائیں! ایک فائل بنائیں جس کا نام /app/[locale]/page.tsx ہو۔

import React from 'react';
import {Translate} from 'tacotranslate/react';

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

نوٹ کریں revalidate ویریبل جو Next.js کو بتاتا ہے کہ صفحہ 60 سیکنڈ بعد دوبارہ تعمیر کیا جائے، اور آپ کے ترجمے تازہ ترین رکھے جائیں۔

مرحلہ 4: سرور سائیڈ رینڈرنگ کا نفاذ کرنا

TacoTranslate سرور سائڈ رینڈرنگ کو سپورٹ کرتا ہے۔ یہ صارف کے تجربے کو بہت بہتر بناتا ہے کیونکہ ترجمہ شدہ مواد فوری طور پر دکھایا جاتا ہے، بجائے اس کے کہ پہلے غیر ترجمہ شدہ مواد کی جھلک دکھائی جائے۔ مزید یہ کہ، ہم کلائنٹ پر نیٹ ورک درخواستوں کو چھوڑ سکتے ہیں، کیونکہ ہمارے پاس پہلے ہی وہ ترجمے موجود ہیں جو صارف جس صفحے کو دیکھ رہا ہے اس کے لیے درکار ہیں۔

سرور سائیڈ رینڈرنگ سیٹ اپ کرنے کے لیے، /next.config.js فائل بنائیں یا اس میں ترمیم کریں:

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = await withTacoTranslate(
		{},
		{
			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'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

اپنی ترتیب کے مطابق isProduction چیک کو تبدیل کریں۔ اگر true ہو، تو TacoTranslate عوامی API کلید دکھائے گا۔ اگر ہم لوکل، ٹیسٹ، یا اسٹیجنگ ماحول (isProduction is false) میں ہوں، تو ہم خفیہ read/write API کلید استعمال کریں گے تاکہ نئے اسٹرنگز ترجمے کے لئے بھیجے جائیں۔

یہ یقینی بنانے کے لیے کہ routing اور redirection متوقع طریقے سے کام کریں، ہمیں /middleware.ts نامی فائل بنانی ہوگی۔ Middleware استعمال کرتے ہوئے، ہم صارفین کو ان کی پسندیدہ زبان میں پیش کی گئی صفحات کی طرف redirect کر سکتے ہیں۔

import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

یقینی بنائیں کہ matcher کو Next.js Middleware documentation کے مطابق سیٹ اپ کریں۔

کلائنٹ پر، آپ locale کوکی کو تبدیل کر سکتے ہیں تاکہ صارف کی ترجیحی زبان کو بدلا جا سکے۔ براہ کرم اس کے طریقے کے بارے میں خیالات کے لیے مکمل مثال کا کوڈ دیکھیں!

Step 5: تعینات کریں اور ٹیسٹ کریں!

ہم مکمل ہو گئے ہیں! آپ کی React ایپلیکیشن اب خود بخود ترجمہ ہو جائے گی جب آپ کسی بھی سٹرنگ کو Translate کمپونینٹ میں شامل کریں گے۔ نوٹ کریں کہ صرف وہی ماحول جن کے پاس API کی کی read/write اجازت ہوگی، نئی سٹرنگز بنانے کے لیے قابل ہوں گے تاکہ ان کا ترجمہ کیا جا سکے۔ ہم تجویز کرتے ہیں کہ ایک بند اور محفوظ اسٹیجنگ ماحول قائم کیا جائے جہاں آپ اپنی پروڈکشن ایپلیکیشن کو اس طرح کے API کی کے ساتھ ٹیسٹ کر سکیں، اور لائیو جانے سے پہلے نئی سٹرنگز شامل کریں۔ اس سے آپ کے خفیہ API کی کو چوری ہونے سے بچایا جا سکے گا، اور ممکنہ طور پر غیر متعلقہ نئی سٹرنگز شامل کر کے آپ کے ترجمہ پراجیکٹ کو بوجھل کرنے سے بھی روک سکے گا۔

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the Pages Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!