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

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

مرحلہ 3: TacoTranslate کی ترتیب

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 provider کو implement کریں گے۔

'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: تعینات کریں اور آزمانا!

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

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

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