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

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

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

یہ رہنمائی اُن Next.js ایپلیکیشنز کے لیے ہے جو Pages Router استعمال کر رہی ہیں۔
اگر آپ App 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 key بنائیں، اور ایک read/write key بنائیں۔ ہم انہیں ماحولیاتی متغیرات (environment variables) کے طور پر محفوظ کریں گے۔ read key کو ہم public کہتے ہیں اور read/write key 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_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 پراپرٹیز۔ نوٹ کریں کہ getTacoTranslateStaticProps پر revalidate ڈیفالٹ کے طور پر 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!"/>;
}

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

import {Translate} from 'tacotranslate/react';

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

مرحلہ 5: ڈپلائے کریں اور جانچ کریں!

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

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

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