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

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

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

اس ٹیوٹوریل میں، ہم دیکھیں گے کہ اپنی React Next.js ایپلیکیشن میں سرور سائیڈ رینڈرنگ کے ساتھ بین الاقوامیت کیسے شامل کی جائے۔ 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: "فولڈر" جہاں آپ کے سٹرنگز محفوظ کیے جائیں گے، جیسے کہ آپ کی ویب سائٹ کا یو آر ایل۔ یہاں اور زیادہ جانیں۔

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: تعینات کریں اور جانچ کریں!

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