ਇੱਕ Next.js ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਜੋ Pages Router ਵਰਤ ਰਿਹਾ ਹੈ, ਵਿੱਖੇ ਇੰਟਰਨੈਸ਼ਨਲਾਈਜ਼ੇਸ਼ਨ ਕਿਵੇਂ ਲਾਗੂ ਕਰੀਏ

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

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

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

ਕਦਮ 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.

ਟੈਕੋਟ੍ਰਾਂਸਲੇਟ ਯਕਸਾਰ ਤੌਰ 'ਤੇ ਤੁਹਾਡੇ ਸਟਰਿੰਗਜ਼ ਨੂੰ ਹਰ ਭਾਸ਼ਾ ਵਿੱਚ ਸਭ ਤੋਂ ਅਧੁਨਿਕ ਏਆਈ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕਰਦਾ ਹੈ, ਅਤੇ ਤੁਹਾਨੂੰ 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>
	);
}

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

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

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