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

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

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

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

Step 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 سیکنڈ کے بعد دوبارہ تیار کیا جائے، اور آپ کے تراجم کو تازہ رکھا جائے۔

مرحلہ 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!