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

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

اگر آپ کے پاس پہلے سے ہی custom pageProps اور _app.tsx موجود ہیں، تو براہ کرم تعریف کو اوپر دی گئی properties اور کوڈ کے ساتھ بڑھائیں۔

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 components کے اندر strings کو ترجمہ کرنے کے لیے Translate component استعمال کر سکیں گے۔

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