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

جیسا کہ دنیا مزید عالمی ہوتی جا رہی ہے، ویب ڈویلپرز کے لیے یہ انتہائی ضروری ہو گیا ہے کہ وہ ایسی ایپلیکیشنز تیار کریں جو مختلف ممالک اور ثقافتوں کے صارفین کی ضروریات کو پورا کر سکیں۔ اس مقصد کو حاصل کرنے کے کلیدی طریقوں میں سے ایک طریقہ بین الاقوامیت (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 کی بنائیں۔ ہم انہیں ماحول کے متغیرات کے طور پر محفوظ کریں گے۔ 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۔ یہاں origin کے بارے میں مزید پڑھیں۔

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 Middleware دستاویزات کے مطابق سیٹ اپ کیا گیا ہو۔

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

مرحلہ 5: تعینات کریں اور آزمائیں!

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