Next.js ਐਪਲੀਕੇਸ਼ਨ (ਜੋ Pages Router ਵਰਤ ਰਿਹਾ ਹੈ) ਵਿੱਚ ਅੰਤਰਰਾਸ਼ਟਰੀਕਰਨ (internationalization) ਨੂੰ ਕਿਵੇਂ ਲਾਗੂ ਕੀਤਾ ਜਾਵੇ?

ਜਿਵੇਂ-ਜਿਵੇਂ ਸੰਸਾਰ ਹੋਰ ਗਲੋਬਲ ਹੁੰਦਾ ਜਾ ਰਿਹਾ ਹੈ, ਵੈੱਬ ਡਿਵੈਲਪਰਾਂ ਲਈ ਇਹ ਹੋਰ ਵੀ ਜ਼ਰੂਰੀ ਹੋ ਗਿਆ ਹੈ ਕਿ ਉਹ ਐਸੇ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਜੋ ਵੱਖ-ਵੱਖ ਦੇਸ਼ਾਂ ਅਤੇ ਸਭਿਆਚਾਰਾਂ ਦੇ ਉਪਭੋਗਤਿਆਂ ਦੀਆਂ ਲੋੜਾਂ ਨੂੰ ਪੂਰਾ ਕਰ ਸਕਣ। ਇਸਨੂੰ ਹਾਸਲ ਕਰਨ ਦੇ ਇਕ ਮੁੱਖ ਤਰੀਕਿਆਂ ਵਿੱਚੋਂ ਇੱਕ ਅੰਤਰਰਾਸ਼ਟਰੀਕਰਨ (i18n) ਹੈ, ਜੋ ਤੁਹਾਨੂੰ ਆਪਣੀ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਵੱਖ-ਵੱਖ ਭਾਸ਼ਾਵਾਂ, ਮੁਦਰਾਵਾਂ ਅਤੇ ਤਾਰੀਖ਼ ਫਾਰਮੈਟਾਂ ਅਨੁਸਾਰ ਅਨੁਕੂਲ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।

ਇਸ ਟਿਊਟੋਰਿਅਲ ਵਿੱਚ, ਅਸੀਂ ਵੇਖਾਂਗੇ ਕਿ ਸਰਵਰ ਸਾਈਡ ਰੈਂਡਰਿੰਗ ਨਾਲ ਆਪਣੇ React Next.js ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਅੰਤਰਰਾਸ਼ਟਰੀਕਰਨ ਨੂੰ ਕਿਵੇਂ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। TL;DR: ਪੂਰਾ ਉਦਾਹਰਨ ਇੱਥੇ ਵੇਖੋ।

ਇਹ ਗਾਈਡ Next.js ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਹੈ ਜੋ Pages Router ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੀਆਂ ਹਨ।
ਜੇ ਤੁਸੀਂ App Router ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਕਿਰਪਾ ਕਰਕੇ ਇਸ ਦੀ ਥਾਂ ਇਹ ਗਾਈਡ ਵੇਖੋ।

Step 1: ਇੱਕ i18n ਲਾਇਬ੍ਰੇਰੀ ਇੰਸਟਾਲ ਕਰੋ

To implement internationalization in your Next.js application, we’ll first choose an i18n library. There are several popular libraries, including next-intl. However, in this example, we'll be using TacoTranslate.

TacoTranslate automatically translates your strings to any language using cutting-edge AI, and frees you from the tedious management of JSON files.

Let’s install it using npm in your terminal:

npm install tacotranslate

ਕਦਮ 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 ਕੁੰਜੀ ਕਦੇ ਵੀ ਕਲਾਇੰਟ-ਸਾਈਡ ਪ੍ਰੋਡਕਸ਼ਨ ਵਾਤਾਵਰਣ ਵਿੱਚ ਲੀਕ ਨਾ ਹੋਵੇ।

ਅਸੀਂ ਹੋਰ ਦੋ ਇਨਵਾਇਰਨਮੈਂਟ ਵੈਰੀਏਬਲ ਵੀ ਜੋੜਾਂਗੇ: 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 ਕੰਪੋਨੈਂਟ ਵਿੱਚ ਕੋਈ ਵੀ ਸਤਰਾਂ ਸ਼ਾਮਲ ਕਰੋਗੇ, ਤਾਂ ਤੁਹਾਡੀ React ਐਪਲੀਕੇਸ਼ਨ ਹੁਣ ਆਪਣੇ ਆਪ ਅਨੁਵਾਦ ਹੋ ਜਾਏਗੀ। ਧਿਆਨ ਰੱਖੋ ਕਿ ਕੇਵਲ ਉਹ ਵਾਤਾਵਰਣ ਜਿਨ੍ਹਾਂ ਕੋਲ API ਕੁੰਜੀ 'ਤੇ read/write ਅਨੁਮਤੀਆਂ ਹਨ, ਨਵੀਆਂ ਅਨੁਵਾਦ ਲਈ ਸਤਰਾਂ ਬਣਾਉਣ ਦੇ ਯੋਗ ਹੋਣਗੇ। ਅਸੀਂ ਸੁਝਾਅ ਦਿੰਦੇ ਹਾਂ ਕਿ ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਬੰਦ ਅਤੇ ਸੁਰੱਖਿਅਤ ਸਟੇਜਿੰਗ ਵਾਤਾਵਰਣ ਹੋਵੇ, ਜਿੱਥੇ ਤੁਸੀਂ ਇਸ ਤਰ੍ਹਾਂ ਦੀ API ਕੁੰਜੀ ਨਾਲ ਆਪਣੀ ਪ੍ਰੋਡਕਸ਼ਨ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਟੈਸਟ ਕਰ ਸਕੋਂ ਅਤੇ ਲਾਈਵ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਨਵੀਆਂ ਸਤਰਾਂ ਜੋੜ ਸਕੋ। ਇਸ ਨਾਲ ਕਿਸੇ ਵੀ ਵਿਅਕਤੀ ਵੱਲੋਂ ਤੁਹਾਡੀ ਸਿੱਟੀ/API ਕੁੰਜੀ ਚੋਰੀ ਹੋਣ ਤੋਂ ਰੋਕਿਆ ਜਾਵੇਗਾ, ਅਤੇ ਸੰਭਵ ਹੈ ਕਿ ਗੈਰ-ਸੰਬੰਧਿਤ ਨਵੀਆਂ ਸਤਰਾਂ ਜੋੜ ਕੇ ਤੁਹਾਡੇ ਅਨੁਵਾਦ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਫੁੱਲਣ ਤੋਂ ਵੀ ਰੋਕਿਆ ਜਾਵੇਗਾ।

ਸਾਡੇ GitHub ਪ੍ਰੋਫਾਈਲ 'ਤੇ ਜ਼ਰੂਰ ਪੂਰਾ ਉਦਾਹਰਨ ਵੇਖੋ। ਉਥੇ, ਤੁਸੀਂ ਇਹ App Router ਵਰਤ ਕੇ ਇਹ ਕਿਵੇਂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਦਾ ਇੱਕ ਉਦਾਹਰਨ ਵੀ ਲੱਭੋਗੇ! ਜੇ ਤੁਹਾਨੂੰ ਕੋਈ ਸਮੱਸਿਆ ਆਏ, ਤਾਂ ਬੇਝਿਜਕ ਸਾਡੇ ਨਾਲ ਸੰਪਰਕ ਕਰੋ, ਅਸੀਂ ਤੁਹਾਡੀ ਮਦਦ ਕਰਨ ਵਿੱਚ ਬਹੁਤ ਖੁਸ਼ ਹੋਵਾਂਗੇ।

TacoTranslate ਤੁਹਾਡੇ React ਐਪਲੀਕੇਸ਼ਨਾਂ ਨੂੰ 75 ਤੋਂ ਵੱਧ ਭਾਸ਼ਾਵਾਂ ਵਿੱਚ ਤੇਜ਼ੀ ਨਾਲ ਆਟੋਮੈਟਿਕ ਤੌਰ 'ਤੇ ਲੋਕਲਾਈਜ਼ ਕਰਨ ਦੀ ਸਹੂਲਤ ਦਿੰਦਾ ਹੈ। ਅੱਜ ਹੀ ਸ਼ੁਰੂ ਕਰੋ!