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

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

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

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 اجازتیں ہوں نئی سٹرنگز تخلیق کر کے ترجمہ کے لیے بھیج سکیں گے۔ ہم تجویز کرتے ہیں کہ آپ کے پاس ایک بند اور محفوظ staging ماحول ہو جہاں آپ اپنے پروڈکشن ایپلیکیشن کو ایسی 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!