Η καλύτερη λύση για διεθνοποίηση (i18n) σε εφαρμογές Next.js

Πώς λειτουργεί

Καθώς ο κόσμος γίνεται όλο και πιο παγκοσμιοποιημένος, γίνεται όλο και πιο σημαντικό για τους προγραμματιστές ιστοσελίδων να δημιουργούν εφαρμογές που να ικανοποιούν χρήστες από διαφορετικές χώρες και πολιτισμούς. Ένας από τους βασικούς τρόπους για να επιτευχθεί αυτό είναι μέσω της διεθνοποίησης (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

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

Θα προσθέσουμε επίσης δύο ακόμα μεταβλητές περιβάλλοντος: TACOTRANSLATE_DEFAULT_LOCALE και TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Ο προεπιλεγμένος κωδικός τοπικής ρύθμισης για fallback. Σε αυτό το παράδειγμα, θα τον ορίσουμε σε en για Αγγλικά.
• TACOTRANSLATE_ORIGIN: Ο «φάκελος» όπου θα αποθηκεύονται οι συμβολοσειρές σας, όπως η διεύθυνση URL του ιστότοπού σας. Μάθετε περισσότερα για τις προελεύσεις εδώ.

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 σύντομα.

Η δημιουργία του 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. Εάν βρισκόμαστε σε τοπικό, δοκιμαστικό ή σκηνικό περιβάλλον (isProduction is false), θα χρησιμοποιήσουμε το μυστικό κλειδί API read/write για να βεβαιωθούμε ότι αποστέλλονται νέες συμβολοσειρές για μετάφραση.

Μέχρι τώρα, έχουμε ρυθμίσει μόνο την εφαρμογή 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 component για να μεταφράζετε κείμενα μέσα σε όλα τα React components σας.

import {Translate} from 'tacotranslate/react';

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

Βήμα 5: Ανάπτυξη και δοκιμή!

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

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

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