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 ایپلیکیشن کے یوزر انٹرفیس میں، ایک پروجیکٹ بنائیں، اور اس کے 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۔ یہاں 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>
	);
}

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