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

جب دنیا مزید عالمگیریت اختیار کرتی جا رہی ہے، تو ویب ڈویلپرز کے لیے یہ بے حد ضروری ہوتا جا رہا ہے کہ وہ ایسی ایپلیکیشنز بنائیں جو مختلف ممالک اور ثقافتوں کے صارفین کی ضروریات کو پورا کر سکیں۔ ایک اہم طریقہ اس مقصد کے حصول کا بین الاقوامی سازی (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 کلید بنائیں۔ ہم انہیں ماحولیاتی متغیرات کے طور پر محفوظ کریں گے۔ 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 سیکنڈ کے بعد دوبارہ تعمیر کرنے کو بتاتا ہے، اور آپ کے تراجم کو تازہ ترین رکھتا ہے۔

Step 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!