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

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

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

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

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

اپنی Next.js ایپلیکیشن میں بین الاقوامیت نافذ کرنے کے لیے، ہم پہلے ایک 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۔ Origins کے بارے میں مزید جاننے کے لیے یہاں پڑھیں۔

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

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

اپنی ایپلیکیشن میں TacoTranslate کو ضم کرنے کے لیے، آپ کو پہلے سے بنائی گئی API keys استعمال کرتے ہوئے ایک کلائنٹ بنانا ہوگا۔ مثال کے طور پر، ایک فائل بنائیں جس کا نام /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 کلید استعمال کریں گے تاکہ یقینی بنایا جا سکے کہ نئی سٹرنگز ترجمے کے لیے بھیجی جائیں۔

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

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 دستاویزات کے مطابق ترتیب دیں۔

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

مرحلہ 5: تعینات کریں اور جانچ کریں!

ہم مکمل ہو گئے ہیں! جب بھی آپ Translate component میں کوئی بھی سٹرنگ شامل کریں گے، آپ کی React ایپلیکیشن اب خود بخود ترجمہ ہو جائے گی۔ نوٹ کریں کہ صرف وہ ماحول جن کے پاس 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!