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

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

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

ਇਸ ਟਿਊਟੋਰਿਯਲ ਵਿੱਚ, ਅਸੀਂ ਵੇਖਾਂਗੇ ਕਿ ਕਿਵੇਂ ਆਪਣੀ React Next.js ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਸਰਵਰ-ਸਾਈਡ ਰੇਂਡਰਿੰਗ ਦੇ ਨਾਲ ਅੰਤਰਰਾਸ਼ਟਰੀਕਰਨ (i18n) ਜੋੜਿਆ ਜਾ ਸਕਦਾ ਹੈ। 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!"/>;
}

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

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

ਕਦਮ 5: ਤੈਨਾਤ ਕਰੋ ਅਤੇ ਪਰਖੋ!

ਅਸੀਂ ਮੁਕੰਮਲ ਕਰ ਲਿਆ! ਤੁਹਾਡੀ Next.js ਐਪਲਿਕੇਸ਼ਨ ਹੁਣ ਆਪਣੇ ਆਪ ਅਨੁਵਾਦ ਹੋ ਜਾਵੇਗੀ ਜਦੋਂ ਤੁਸੀਂ Translate ਕੰਪੋਨੈਂਟ ਵਿੱਚ ਕੋਈ ਵੀ ਸਤਰ ਜੋੜੋਗੇ। ਧਿਆਨ ਰੱਖੋ ਕਿ ਸਿਰਫ਼ ਉਹੀ ਵਾਤਾਵਰਣ ਜਿਨ੍ਹਾਂ ਕੋਲ 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!