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

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

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

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

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

اپنی Next.js ایپلیکیشن میں بین الاقوامیت (internationalization) نافذ کرنے کے لیے، ہم سب سے پہلے ایک 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۔ ماخذ کے بارے میں مزید یہاں پڑھیں۔

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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

ہم جلد ہی TACOTRANSLATE_API_KEY خودکار طور پر متعین کریں گے۔

کلائنٹ کو الگ فائل میں بنانا بعد میں اسے دوبارہ استعمال کرنا آسان بناتا ہے۔ اب، ایک کسٹم /pages/_app.tsx استعمال کرتے ہوئے، ہم TacoTranslate پرووائیڈر کو شامل کریں گے۔

import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';

type PageProperties = {
	origin: Origin;
	locale: Locale;
	locales: Locale[];
	localizations: Localizations;
};

export default function App({Component, pageProps}: AppProps<PageProperties>) {
	const {origin, locale, locales, localizations} = pageProps;

	return (
		<TacoTranslate
			client={tacoTranslate}
			origin={origin}
			locale={locale}
			localizations={localizations}
		>
			<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
			<Component {...pageProps} />
		</TacoTranslate>
	);
}

اگر آپ کے پاس پہلے سے کسٹم pageProps اور _app.tsx موجود ہیں، تو براہِ کرم اوپر دی گئی خصوصیات اور کوڈ کے ساتھ تعریف میں توسیع کریں۔

مرحلہ 4: سرور سائیڈ رینڈرنگ کا نفاذ

TacoTranslate آپ کی تراجم کے لیے سرور سائیڈ رینڈرنگ کی اجازت دیتا ہے۔ یہ صارف کے تجربے کو بہت بہتر بناتا ہے کیونکہ ترجمہ شدہ مواد فوراً دکھایا جاتا ہے، بجائے اس کے کہ پہلے غیرترجمہ شدہ مواد کا ایک جھلک دکھائی دے۔ مزید برآں، ہم کلائنٹ پر نیٹ ورک درخواستوں کو چھوڑ سکتے ہیں، کیونکہ ہمارے پاس پہلے سے ہی تمام مطلوبہ تراجم موجود ہیں۔

ہم /next.config.js بنا کر یا ترمیم کر کے شروع کریں گے۔

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = {};

	return withTacoTranslate(config, {
		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'),
	});
};

اپنے سیٹ اپ کے مطابق isProduction چیک کو تبدیل کریں۔ اگر true ہو، تو TacoTranslate عوامی API کلید ظاہر کرے گا۔ اگر ہم لوکل، ٹیسٹ، یا اسٹیجنگ ماحول میں ہیں (isProduction is false)، تو ہم خفیہ read/write API کلید استعمال کریں گے تاکہ نئی سٹرنگز ترجمے کے لیے بھیجی جا سکیں۔

اب تک، ہم نے صرف Next.js ایپلیکیشن کو حمایتی زبانوں کی فہرست کے ساتھ ترتیب دیا ہے۔ اگلا مرحلہ یہ ہوگا کہ ہم آپ کے تمام صفحات کے تراجم حاصل کریں۔ ایسا کرنے کے لیے، آپ اپنی ضروریات کے مطابق getTacoTranslateStaticProps یا getTacoTranslateServerSideProps میں سے کسی ایک کا استعمال کریں گے۔

یہ فنکشن تین دلائل لیتے ہیں: ایک Next.js Static Props Context آبجیکٹ، TacoTranslate کے لیے کنفیگریشن، اور اختیاری Next.js خصوصیات۔ نوٹ کریں کہ revalidate on getTacoTranslateStaticProps ڈیفالٹ کے طور پر 60 پر سیٹ ہے، تاکہ آپ کے تراجم تازہ رہیں۔

کسی بھی ایک فنکشن کو صفحے میں استعمال کرنے کے لیے، فرض کریں کہ آپ کے پاس درج ذیل جیسی ایک صفحہ فائل ہے: /pages/hello-world.tsx.

import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';

export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

export default function Page() {
	return <Translate string="Hello, world!"/>;
}

اب آپ Translate کمپونینٹ کو اپنے تمام React کمپونینٹس میں موجود سٹرنگز کو ترجمہ کرنے کے لیے استعمال کر سکتے ہیں۔

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

مرحلہ 5: ڈپلائے کریں اور ٹیسٹ کریں!

ہم مکمل ہو چکے ہیں! آپ کی React ایپلیکیشن اب خودکار طور پر ترجمہ ہو جائے گی جب آپ Translate کمپونینٹ میں کوئی بھی سٹرنگ شامل کریں گے۔ نوٹ کریں کہ صرف وہ ماحول جن کے پاس API کلید پر read/write اجازتیں ہوں گی، نئے سٹرنگز بنانے کے قابل ہوں گے جو ترجمہ کیے جائیں۔ ہم سفارش کرتے ہیں کہ ایک بند اور محفوظ اسٹیجنگ ماحول رکھا جائے جہاں آپ ایسی API کلید کے ساتھ اپنی پروڈکشن ایپلیکیشن کی جانچ کر سکیں، اور لائیو ہونے سے پہلے نئی سٹرنگز شامل کریں۔ یہ کسی کو آپ کی خفیہ API کلید چوری کرنے سے روکے گا، اور ممکنہ طور پر آپ کے ترجمہ پروجیکٹ کو نئے، غیر متعلقہ سٹرنگز شامل کر کے بڑھ جانے سے بچائے گا۔

براہِ کرم ہمارے GitHub پروفائل پر مکمل مثال کو دیکھیں۔ وہاں آپ کو یہ کرنے کا ایک نمونہ App Router استعمال کرتے ہوئے بھی ملے گا! اگر آپ کو کوئی مسئلہ درپیش ہو تو بلا جھجھک ہم سے رابطہ کریں، اور ہمیں آپ کی مدد کر کے خوشی ہوگی۔

TacoTranslate آپ کی React ایپلیکیشنز کو خودکار طور پر اور تیزی سے 75 سے زائد زبانوں میں لوکلائز کرنے کی سہولت دیتا ہے۔ آج ہی شروع کریں!