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

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

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

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