Next.js ایپلیکیشنز میں بین الاقوامیت (i18n) کے لیے بہترین حل

یہ کیسے کام کرتا ہے

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

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!"/>;
}

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

import {Translate} from 'tacotranslate/react';

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

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

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

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!