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 کلید بنائیں، اور ایک 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>
	);
}

اگر آپ کے پاس پہلے سے ہی کسٹم 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 اجزاء کے اندر سٹرنگز کو Translate کمپونینٹ کے ذریعے ترجمہ کر سکیں گے۔

import {Translate} from 'tacotranslate/react';

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

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

ہم مکمل کر چکے ہیں! جب آپ کسی بھی سٹرنگ کو Translate کمپوننٹ میں شامل کریں گے تو آپ کی Next.js ایپلیکیشن خود بخود ترجمہ ہو جائے گی۔ نوٹ کریں کہ صرف وہ ماحول جن کے پاس 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!