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

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

Step 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: تعینات کریں اور آزمائیں!

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

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

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