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 کی۔ ہم انہیں 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 کی ترتیب دینا

اپنے اپلیکیشن کے ساتھ 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>
	);
}

اگر آپ کے پاس پہلے ہی custom 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 پراپرٹیز۔ نوٹ کریں کہ 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!"/>;
}

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

import {Translate} from 'tacotranslate/react';

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

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

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