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

جیسے جیسے دنیا زیادہ عالمی ہوتی جا رہی ہے، ویب ڈویلپرز کے لیے یہ ضروری ہوتا جا رہا ہے کہ وہ ایسی ایپلیکیشنز بنائیں جو مختلف ممالک اور ثقافتوں کے صارفین کے مطابق ہوں۔ بین الاقوامیت (i18n) اس مقصد کو حاصل کرنے کے اہم طریقوں میں سے ایک ہے، جو آپ کو اپنی ایپلیکیشن کو مختلف زبانوں، کرنسیوں، اور تاریخ کے فارمیٹس کے مطابق ڈھالنے کی اجازت دیتی ہے۔

اس ٹیوٹوریل میں ہم یہ دیکھیں گے کہ اپنی React Next.js ایپلیکیشن میں سرور سائیڈ رینڈرنگ کے ساتھ بین الاقوامیت (i18n) کیسے شامل کی جائے۔ TL;DR: مکمل مثال یہاں دیکھیں۔

یہ رہنما Next.js ایپلیکیشنز کے لیے ہے جو Pages Router استعمال کر رہی ہیں۔
اگر آپ App Router استعمال کر رہے ہیں، تو براہِ کرم اس رہنما کو ملاحظہ کریں۔

مرحلہ 1: ایک i18n لائبریری انسٹال کریں

اپنی Next.js ایپلیکیشن میں بین الاقوامی کاری (i18n) نافذ کرنے کے لیے، ہم پہلے ایک 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: وہ "فولڈر" جہاں آپ کا متن محفوظ کیا جائے گا، جیسے کہ آپ کی ویب سائٹ کا یو آر ایل۔ 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!"/>;
}

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

import {Translate} from 'tacotranslate/react';

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

مرحلہ 5: تعینات کریں اور جانچ کریں!

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

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

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