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

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

Καθώς ο κόσμος γίνεται όλο και πιο παγκοσμιοποιημένος, γίνεται όλο και πιο σημαντικό για τους προγραμματιστές 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. Δημιουργήστε έναν λογαριασμό εδώ. Είναι δωρεάν, και δεν απαιτεί να προσθέσετε πιστωτική κάρτα.

Στο περιβάλλον χρήστη (UI) της εφαρμογής 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), θα χρησιμοποιήσουμε το μυστικό κλειδί 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 συστατικό για να μεταφράσετε τις συμβολοσειρές σε όλα τα React συστατικά σας.

import {Translate} from 'tacotranslate/react';

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

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

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