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 ਕੀ ਬਣਾਓ। ਅਸੀਂ ਉਹਨਾਂ ਨੂੰ ਵਾਤਾਵਰਣ ਵੇਰੀਏਬਲ ਵਜੋਂ ਸੇਵ ਕਰਾਂਗੇ। 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: ਤੈਨਾਤ ਕਰੋ ਅਤੇ ਟੈਸਟ ਕਰੋ!

ਸਾਡਾ ਕੰਮ ਹੋ ਗਿਆ! ਹੁਣ ਜਦੋਂ ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਸਟਰਿੰਗ ਨੂੰ 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!