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

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

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

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

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

اپنے Next.js ایپلیکیشن میں بین الاقوامیت (i18n) کو نافذ کرنے کے لیے، ہم سب سے پہلے ایک 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 صرف ایک یوٹیلیٹی فنکشن ہے جس میں کچھ بلٹ-ان ایرر ہینڈلنگ ہے۔ اب، ایک فائل بنائیں جس کا نام /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!