Next.js ਐਪਸ ਵਿੱਚ ਅੰਤਰਰਾਸ਼ਟਰੀਕਰਨ (i18n) ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਹੱਲ

ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ

ਜਿਵੇਂ-ਜਿਵੇਂ ਦੁਨੀਆ ਵਧਦੀ ਹੋਈ ਗਲੋਬਲ ਬਣ ਰਹੀ ਹੈ, ਵੈੱਬ ਡਿਵੈਲਪਰਾਂ ਲਈ ਇਹ ਅਹਿਮ ਹੋ ਰਹੈ ਹੈ ਕਿ ਉਹ ਅਜਿਹੇ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਜੋ ਵੱਖ-ਵੱਖ ਦੇਸ਼ਾਂ ਅਤੇ ਸੱਭਿਆਚਾਰਾਂ ਦੇ ਉਪਭੋਗਤਿਆਂ ਦੀ ਸੇਵਾ ਕਰ ਸਕਣ। ਇਸਨੂੰ ਹਾਸਲ ਕਰਨ ਦੇ ਮੁੱਖ ਤਰੀਕਿਆਂ ਵਿੱਚੋਂ ਇੱਕ ਅੰਤਰਰਾਸ਼ਟਰੀਕਰਨ (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.

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>
	);
}

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

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

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