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

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

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

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

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

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