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 ایپلیکیشن یو آئی میں، ایک پروجیکٹ بنائیں، اور اس کے 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۔ یہاں اور زیادہ پڑھیں اصل کے بارے میں۔

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 documentation کے مطابق سیٹ اپ کریں۔

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

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

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