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

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

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

یہ گائیڈ App Router استعمال کرنے والی Next.js ایپلیکیشنز کے لیے ہے۔
اگر آپ 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 کی بنائیں۔ ہم انہیں ماحول کے متغیرات کے طور پر محفوظ کریں گے۔ 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: وہ "فولڈر" جہاں آپ کے سٹرنگز محفوظ کیے جائیں گے، جیسے کہ آپ کی ویب سائٹ کا یو آر ایل۔ یہاں اور زیادہ معلومات حاصل کریں۔

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 محض ایک utility فنکشن ہے جس میں کچھ built-in error handling شامل ہے۔ اب، ایک فائل بنائیں جس کا نام /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 documentation کے مطابق ترتیب دیا جائے۔

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

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

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

یقین دہانی کریں کہ آپ ہمارے GitHub پروفائل پر مکمل مثال دیکھیں۔ وہاں، آپ کو یہ کرنے کا ایک اور طریقہ بھی ملے گا جو Pages Router استعمال کرتا ہے! اگر آپ کو کوئی مسئلہ درپیش ہو تو، بلا جھجھک رابطہ کریں، اور ہم آپ کی مدد کرنے میں خوشی محسوس کریں گے۔

TacoTranslate آپ کے React ایپلیکیشنز کو خودکار طریقے سے تیزی سے کسی بھی زبان میں اور زبان سے زیادہ تر مقامی بناتا ہے۔ آج ہی شروع کریں!