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 جدید ترین مصنوعی ذہانت کے ذریعے آپ کے متون کو خودکار طور پر کسی بھی زبان میں ترجمہ کرتا ہے، اور آپ کو 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: وہ "فولڈر" جہاں آپ کے متن محفوظ کیے جائیں گے، مثلاً آپ کی ویب سائٹ کا 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: تعینات کریں اور جانچ کریں!

ہم ہو چکے ہیں! آپ کی React ایپلیکیشن اب خودکار طور پر ترجمہ ہو جائے گی جب آپ کوئی بھی سٹرنگ Translate کمپونینٹ میں شامل کریں گے۔ نوٹ کریں کہ API کلید پر read/write اجازتیں رکھنے والے ماحول ہی نئے سٹرنگز بنا کر ترجمہ کے لیے بھیج سکیں گے۔ ہم تجویز کرتے ہیں کہ آپ کے پاس ایک بند اور محفوظ staging ماحول ہو جہاں آپ اس طرح کی 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!