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

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

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

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

Step 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۔ 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 خصوصیات۔ نوٹ کریں کہ revalidate کو 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!"/>;
}

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

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 سے زائد زبانوں میں اور ان زبانوں سے تیزی سے خودکار طور پر مقامی بناتا ہے۔ آج ہی شروع کریں!