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

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

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 آبجیکٹ، ٹیکوٹرانسلیٹ کے لئے ترتیب، اور اختیاری 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!"/>;
}

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

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

مرحلہ 5: تعینات کریں اور آزمائیں!

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

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

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