Πώς να υλοποιήσετε την διεθνοποίηση σε μια εφαρμογή Next.js που χρησιμοποιεί το App Router

Καθώς ο κόσμος παγκοσμιοποιείται, γίνεται ολοένα και πιο σημαντικό για τους προγραμματιστές ιστού να δημιουργούν εφαρμογές που μπορούν να εξυπηρετούν χρήστες από διαφορετικές χώρες και πολιτισμούς. Ένας από τους βασικούς τρόπους για να το επιτύχετε είναι μέσω της διεθνοποίησης (i18n), η οποία σας επιτρέπει να προσαρμόσετε την εφαρμογή σας σε διαφορετικές γλώσσες, νομίσματα και μορφές ημερομηνίας.

Σε αυτό το άρθρο, θα εξερευνήσουμε πώς να προσθέσετε διεθνοποίηση στην εφαρμογή React Next.js σας, με rendering από την πλευρά του διακομιστή. TL;DR: Δείτε το πλήρες παράδειγμα εδώ.

Αυτός ο οδηγός είναι για εφαρμογές Next.js που χρησιμοποιούν τον App Router.
Αν χρησιμοποιείτε τον Pages Router, δείτε αυτόν τον οδηγό αντί αυτού.

Βήμα 1: Εγκαταστήστε μια βιβλιοθήκη i18n

Για να εφαρμόσουμε την διεθνοποίηση στην εφαρμογή Next.js σας, θα επιλέξουμε πρώτα μια βιβλιοθήκη i18n. Υπάρχουν αρκετές δημοφιλείς βιβλιοθήκες, όπως next-intl. Στο παράδειγμα αυτό, όμως, θα χρησιμοποιήσουμε την TacoTranslate.

Το TacoTranslate μεταφράζει αυτόματα τις συμβολοσειρές σας σε οποιαδήποτε γλώσσα χρησιμοποιώντας υπερσύγχρονη τεχνητή νοημοσύνη και σας απαλλάσσει από την κουραστική διαχείριση αρχείων JSON.

Ας το εγκαταστήσουμε χρησιμοποιώντας npm στο τερματικό σας:

npm install tacotranslate

Βήμα 2: Δημιουργήστε έναν δωρεάν λογαριασμό στο TacoTranslate

Τώρα που έχετε εγκαταστήσει το module, είναι ώρα να δημιουργήσετε έναν λογαριασμό στο TacoTranslate, ένα έργο μετάφρασης και τα αντίστοιχα κλειδιά API. Δημιουργήστε έναν λογαριασμό εδώ. Είναι δωρεάν, και δεν απαιτεί την προσθήκη πιστωτικής κάρτας.

Στο UI της εφαρμογής TacoTranslate, δημιουργήστε ένα έργο και μεταβείτε στην καρτέλα API keys. Δημιουργήστε ένα read κλειδί και ένα read/write κλειδί. Θα τα αποθηκεύσουμε ως μεταβλητές περιβάλλοντος. Το read κλειδί είναι αυτό που ονομάζουμε public και το read/write κλειδί είναι secret. Για παράδειγμα, μπορείτε να τα προσθέσετε σε ένα αρχείο .env στη ρίζα του έργου σας.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Βεβαιωθείτε να μην διαρρεύσετε ποτέ το μυστικό κλειδί API read/write σε περιβάλλοντα παραγωγής στην πλευρά του πελάτη.

Θα προσθέσουμε επίσης δύο ακόμη μεταβλητές περιβάλλοντος: 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 στην εφαρμογή σας, θα χρειαστεί να δημιουργήσετε έναν client χρησιμοποιώντας τα κλειδιά 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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

Θα ορίσουμε αυτόματα TACOTRANSLATE_API_KEY και TACOTRANSLATE_PROJECT_LOCALE σύντομα.

Η δημιουργία του client σε ξεχωριστό αρχείο καθιστά εύκολη τη μετέπειτα επαναχρησιμοποίησή του. getLocales είναι απλώς μια βοηθητική συνάρτηση με ενσωματωμένο χειρισμό σφαλμάτων. Τώρα, δημιουργήστε ένα αρχείο με όνομα /app/[locale]/tacotranslate.tsx, όπου θα υλοποιήσουμε τον πάροχο TacoTranslate.

'use client';

import React, {type ReactNode} from 'react';
import {
	type TranslationContextProperties,
	TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslateClient}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

Σημειώστε το 'use client'; που υποδεικνύει ότι πρόκειται για μια συνιστώσα πελάτη.

Τώρα που ο πάροχος του context είναι έτοιμος προς χρήση, δημιουργήστε ένα αρχείο με όνομα /app/[locale]/layout.tsx, το βασικό layout στην εφαρμογή μας. Σημειώστε ότι αυτή η διαδρομή περιέχει έναν φάκελο που χρησιμοποιεί Dynamic Routes, όπου [locale] είναι η δυναμική παράμετρος.

import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';

export async function generateStaticParams() {
	const locales = await tacoTranslateClient.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: Promise<{locale: Locale}>;
	readonly children: ReactNode;
};

export default async function RootLayout({params, children}: RootLayoutParameters) {
	const {locale} = await params;
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const localizations = await tacoTranslateClient.getLocalizations({
		locale,
		origins: [origin /* , other origins to fetch */],
	});

	return (
		<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					{children}
				</TacoTranslate>
			</body>
		</html>
	);
}

Το πρώτο που πρέπει να σημειώσουμε εδώ είναι ότι χρησιμοποιούμε την παράμετρο Dynamic Route [locale] για να ανακτήσουμε τις μεταφράσεις για αυτή τη γλώσσα. Επιπλέον, η generateStaticParams διασφαλίζει ότι όλοι οι κωδικοί τοπικών ρυθμίσεων (locale) που έχετε ενεργοποιήσει για το έργο σας έχουν προ-αποδοθεί.

Τώρα, ας δημιουργήσουμε την πρώτη μας σελίδα! Δημιουργήστε ένα αρχείο με το όνομα /app/[locale]/page.tsx.

import React from 'react';
import {Translate} from 'tacotranslate/react';

export const revalidate = 60;
export default async function Page() {
	return (
		<Translate string="Hello, world!" />
	);
}

Σημειώστε τη μεταβλητή revalidate που λέει στο Next.js να αναδημιουργεί τη σελίδα μετά από 60 δευτερόλεπτα και να διατηρεί τις μεταφράσεις σας ενημερωμένες.

Βήμα 4: Εφαρμογή απόδοσης στην πλευρά του διακομιστή

TacoTranslate υποστηρίζει rendering από την πλευρά του διακομιστή. Αυτό βελτιώνει σημαντικά την εμπειρία του χρήστη, εμφανίζοντας το μεταφρασμένο περιεχόμενο αμέσως, αντί να εμφανίζεται αρχικά μια σύντομη περίοδος μη μεταφρασμένου περιεχομένου. Επιπλέον, μπορούμε να παραλείψουμε τα δικτυακά αιτήματα από την πλευρά του πελάτη, επειδή ήδη διαθέτουμε τις μεταφράσεις που χρειαζόμαστε για τη σελίδα που προβάλλει ο χρήστης.

Για να ρυθμίσετε την απόδοση στην πλευρά του διακομιστή, δημιουργήστε ή τροποποιήστε /next.config.js:

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = await withTacoTranslate(
		{},
		{
			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'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

Τροποποιήστε τον έλεγχο isProduction ώστε να ταιριάζει με τη ρύθμισή σας. Αν true, το TacoTranslate θα εμφανίσει το δημόσιο κλειδί API. Αν βρισκόμαστε σε τοπικό, δοκιμαστικό ή staging περιβάλλον (isProduction is false), θα χρησιμοποιήσουμε το μυστικό κλειδί API read/write για να διασφαλίσουμε ότι νέες συμβολοσειρές αποστέλλονται για μετάφραση.

Για να διασφαλίσουμε ότι η δρομολόγηση και η ανακατεύθυνση λειτουργούν όπως αναμένεται, θα χρειαστεί να δημιουργήσουμε ένα αρχείο με όνομα /middleware.ts. Χρησιμοποιώντας Middleware, μπορούμε να ανακατευθύνουμε τους χρήστες σε σελίδες που εμφανίζονται στην προτιμώμενη γλώσσα τους.

import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

Βεβαιωθείτε ότι έχετε ρυθμίσει το matcher σύμφωνα με την τεκμηρίωση του Next.js για το Middleware.

Στην πλευρά του πελάτη, μπορείτε να τροποποιήσετε το cookie locale για να αλλάξετε την προτιμώμενη γλώσσα του χρήστη. Δείτε το πλήρες παράδειγμα κώδικα για ιδέες σχετικά με το πώς να το κάνετε!

Βήμα 5: Αναπτύξτε και δοκιμάστε!

Τελειώσαμε! Η React εφαρμογή σας θα μεταφράζεται αυτόματα όταν προσθέτετε οποιεσδήποτε συμβολοσειρές σε ένα Translate component. Σημειώστε ότι μόνο τα περιβάλλοντα με δικαιώματα read/write στο κλειδί API θα μπορούν να δημιουργούν νέες συμβολοσειρές προς μετάφραση. Συνιστούμε να έχετε ένα κλειστό και ασφαλές περιβάλλον προ-παραγωγής όπου μπορείτε να δοκιμάσετε την εφαρμογή παραγωγής σας με ένα τέτοιο κλειδί 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 Pages 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!