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

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

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

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

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

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

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

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

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

npm install tacotranslate

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

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

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

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

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

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

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. Εάν βρισκόμαστε σε τοπικό, δοκιμαστικό ή σκηνικό περιβάλλον (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 component. Σημειώστε ότι μόνο τα περιβάλλοντα με δικαιώματα read/write στο API key θα μπορούν να δημιουργούν νέες συμβολοσειρές για μετάφραση. Συνιστούμε να έχετε ένα κλειστό και ασφαλές staging περιβάλλον όπου μπορείτε να δοκιμάζετε την παραγωγική σας εφαρμογή με ένα τέτοιο API key, προσθέτοντας νέες συμβολοσειρές πριν από τη ζώνη παραγωγής. Αυτό θα αποτρέψει οποιονδήποτε από το να κλέψει το μυστικό σας API key και ενδεχομένως να γεμίσει υπερβολικά το έργο μετάφρασης προσθέτοντας νέες, μη σχετικές συμβολοσειρές.

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

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