Next.js ایپس میں بین الاقوامیت (i18n) کے لیے بہترین حل
کیا آپ اپنی Next.js ایپلیکیشن کو نئے بازاروں تک وسیع کرنا چاہتے ہیں؟ TacoTranslate آپ کے Next.js پروجیکٹ کو لوکلائز کرنا آسان بنا دیتا ہے، جس سے آپ بغیر کسی مشکل کے عالمی ناظرین تک پہنچ سکتے ہیں۔
Next.js کے لیے TacoTranslate کیوں منتخب کریں؟
- بے حد مربوط ہونا: خاص طور پر Next.js ایپلیکیشنز کے لئے ڈیزائن کیا گیا، TacoTranslate آپ کے موجودہ ورک فلو میں آسانی سے ضم ہوجاتا ہے۔
- خودکار سٹرنگ کلیکشن: JSON فائلوں کا دستی انتظام اب نہیں کرنا پڑے گا۔ TacoTranslate خود بخود آپ کے کوڈبیس سے سٹرنگز جمع کرتا ہے۔
- AI سے چلنے والے ترجمے: AI کی طاقت کا فائدہ اٹھائیں تاکہ آپ کی ایپلیکیشن کے لہجے کے مطابق سیاق و سباق میں درست ترجمے فراہم کیے جا سکیں۔
- فوری زبان کی حمایت: صرف ایک کلک سے نئی زبانوں کی حمایت شامل کریں، جس سے آپ کی ایپلیکیشن عالمی سطح پر قابل رسائی ہو جاتی ہے۔
یہ کیسے کام کرتا ہے
جیسا کہ دنیا زیادہ عالمی ہوتی جا رہی ہے، ویب ڈویلپرز کے لیے یہ ضروری ہوتا جا رہا ہے کہ وہ ایسی ایپلیکیشنز بنائیں جو مختلف ممالک اور ثقافتوں کے صارفین کی ضروریات کو پورا کر سکیں۔ اس کو حاصل کرنے کے اہم طریقوں میں سے ایک طریقہ بین الاقوامیت (i18n) ہے، جو آپ کو اپنی ایپلیکیشن کو مختلف زبانوں، کرنسیوں، اور تاریخ کے فارمیٹس کے مطابق ڈھالنے کی اجازت دیتا ہے۔
اس ٹیوٹوریل میں، ہم یہ جانیں گے کہ اپنی React Next.js ایپلیکیشن میں سرور سائیڈ رینڈرنگ کے ساتھ بین الاقوامیت کیسے شامل کی جائے۔ TL;DR: مکمل مثال یہاں دیکھیں۔
یہ گائیڈ اُن Next.js ایپلیکیشنز کے لیے ہے جو Pages Router استعمال کر رہی ہیں۔
اگر آپ App Router استعمال کر رہے ہیں، تو براہِ کرم اس گائیڈ کو دیکھیں۔
Step 1: ایک i18n لائبریری انسٹال کریں
To implement internationalization in your Next.js application, ہم پہلے ایک 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>
);
}
اگر آپ کے پاس پہلے سے ہی 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 خصوصیات۔ نوٹ کریں کہ 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
کمپونینٹ میں کوئی سٹرنگ شامل کریں گے۔ نوٹ کریں کہ صرف وہ ماحول جن کے پاس 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!