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 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। 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!"/>;
}

ਹੁਣ ਤੁਸੀਂ Translate ਕੰਪੋਨੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੇ ਸਾਰੇ React ਕੰਪੋਨੈਂਟਾਂ ਵਿੱਚ ਸਟ੍ਰਿੰਗਾਂ ਦਾ ਅਨੁਵਾਦ ਕਰ ਸਕਦੇ ਹੋ।

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!