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

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

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

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

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

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

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

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

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

ہم کام مکمل کر چکے ہیں! جب بھی آپ Translate کمپونینٹ میں کوئی متن شامل کریں گے، آپ کی 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!