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

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

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: تعینات کریں اور جانچ کریں!

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

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

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