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

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

اس ٹیوٹوریل میں ہم یہ دیکھیں گے کہ اپنی React Next.js ایپلیکیشن میں سرور سائیڈ رینڈرنگ کے ساتھ بین الاقوامیت (i18n) کیسے شامل کی جائے۔ 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 کلید۔ ہم انہیں ماحولیاتی متغیرات (environment variables) کے طور پر محفوظ کریں گے۔ 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 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 سے زائد زبانوں میں اور ان زبانوں سے تیزی سے لوکلائز کرنے کی سہولت دیتا ہے۔ آج ہی شروع کریں!