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 ਕੁੰਜੀਆਂ (API keys) ਟੈਬ 'ਤੇ ਜਾਓ। Create one read key, and one read/write key. ਅਸੀਂ ਇਨ੍ਹਾਂ ਨੂੰ ਐਨਵਾਇਰਨਮੈਂਟ ਵੈਰੀਏਬਲਾਂ ਵਜੋਂ ਸੇਵ ਕਰਾਂਗੇ। 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। origins ਬਾਰੇ ਹੋਰ ਪੜ੍ਹੋ ਇੱਥੇ।

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 ਅਨੁਮਤੀਆਂ ਹੋਣਗੀਆਂ, ਨਵੀਆਂ ਅਨੁਵਾਦ ਲਈ ਬਣਾਈ ਜਾਣ ਵਾਲੀਆਂ ਸਟ੍ਰਿੰਗਾਂ ਬਣਾਉਣ ਦੇ ਯੋਗ ਹੋਣਗੇ। ਅਸੀਂ ਸਿਫਾਰਸ਼ ਕਰਦੇ ਹਾਂ ਕਿ ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਬੰਦ ਅਤੇ ਸੁਰੱਖਿਅਤ ਸਟੇਜਿੰਗ ਵਾਤਾਵਰਣ ਹੋਵੇ, ਜਿੱਥੇ ਤੁਸੀਂ ਅਜਿਹੀ 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!