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

Step 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 کلید کلائنٹ سائڈ پروڈکشن ماحول میں ظاہر نہ ہو۔

ہم دو مزید environment variables بھی شامل کریں گے: 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-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!"/>;
}

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

import {Translate} from 'tacotranslate/react';

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

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

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

یقیناً ہمارے GitHub پروفائل پر مکمل مثال دیکھیں۔ وہاں آپ کو یہ بھی ایک مثال ملے گی کہ یہ کام App Router استعمال کرتے ہوئے کیسے کرنا ہے! اگر آپ کو کوئی مسئلہ پیش آئے تو بلا جھجھک رابطہ کریں، اور ہم خوشی خوشی مدد کریں گے۔

TacoTranslate آپ کو آپ کی React ایپلیکیشنز کو کسی بھی زبان میں تیزی سے خودکار طریقے سے لوکلائز کرنے کی سہولت دیتا ہے۔ آج ہی شروع کریں!