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

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

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

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

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

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

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

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

npm install tacotranslate

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

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

Στο περιβάλλον χρήστη της εφαρμογής TacoTranslate, δημιουργήστε ένα έργο και μεταβείτε στην καρτέλα κλειδιών API. Δημιουργήστε ένα κλειδί 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: Ο προεπιλεγμένος κωδικός τοπικής ρύθμισης (fallback). Σε αυτό το παράδειγμα, θα τον ορίσουμε σε 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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

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

Η δημιουργία του client σε ξεχωριστό αρχείο κάνει πιο εύκολη την επαναχρησιμοποίησή του αργότερα. Τώρα, χρησιμοποιώντας ένα προσαρμοσμένο /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. Εάν βρισκόμαστε σε τοπικό, δοκιμαστικό ή staging περιβάλλον (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: Αναπτύξτε και δοκιμάστε!

Τελειώσαμε! Η εφαρμογή React σας θα μεταφράζεται τώρα αυτόματα όταν προσθέτετε οποιεσδήποτε συμβολοσειρές σε ένα Translate στοιχείο. Σημειώστε ότι μόνο περιβάλλοντα με δικαιώματα read/write στο κλειδί API θα μπορούν να δημιουργούν νέες συμβολοσειρές προς μετάφραση. Συνιστούμε να έχετε ένα κλειστό και ασφαλές staging περιβάλλον όπου μπορείτε να δοκιμάσετε την εφαρμογή παραγωγής σας με ένα τέτοιο κλειδί API, προσθέτοντας νέες συμβολοσειρές πριν το δημοσιεύσετε. Αυτό θα αποτρέψει οποιονδήποτε οποιονδήποτε από το να κλέψει το μυστικό σας κλειδί API, και ενδεχομένως να φουσκώσει το έργο μετάφρασής σας προσθέτοντας νέες, άσχετες συμβολοσειρές.

Μην ξεχάσετε να δείτε το πλήρες παράδειγμα στο προφίλ μας στο GitHub. Εκεί θα βρείτε επίσης ένα παράδειγμα για το πώς να το κάνετε χρησιμοποιώντας τον App Router! Αν αντιμετωπίσετε οποιοδήποτε πρόβλημα, μη διστάσετε να επικοινωνήσετε, και θα χαρούμε πολύ να βοηθήσουμε.

Το TacoTranslate σας επιτρέπει να τοπικοποιείτε αυτόματα τις εφαρμογές React σας, γρήγορα προς και από περισσότερες από 75 γλώσσες. Ξεκινήστε σήμερα!