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

Καθώς ο κόσμος γίνεται όλο και πιο παγκοσμιοποιημένος, είναι όλο και πιο σημαντικό για τους προγραμματιστές ιστού να δημιουργούν εφαρμογές που μπορούν να εξυπηρετούν χρήστες από διαφορετικές χώρες και πολιτισμούς. Ένας από τους βασικούς τρόπους για να επιτευχθεί αυτό είναι μέσω της διεθνοποίησης (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 keys του. Δημιουργήστε ένα read key και ένα read/write key. Θα τα αποθηκεύσουμε ως μεταβλητές περιβάλλοντος. Το read key είναι αυτό που ονομάζουμε public και το read/write key είναι 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 της ιστοσελίδας σας. Διαβάστε περισσότερα για τις προελεύσεις εδώ.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Βήμα 3: Ρύθμιση του TacoTranslate

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 key. Αν βρισκόμαστε σε τοπικό, δοκιμαστικό ή staging περιβάλλον (isProduction is false), θα χρησιμοποιήσουμε το μυστικό read/write API key για να διασφαλίσουμε ότι νέες συμβολοσειρές θα αποστέλλονται για μετάφραση.

Μέχρι τώρα, έχουμε ρυθμίσει μόνο την εφαρμογή Next.js με μια λίστα υποστηριζόμενων γλωσσών. Το επόμενο πράγμα που θα κάνουμε είναι να φέρουμε μεταφράσεις για όλες τις σελίδες σας. Για να το κάνετε αυτό, θα χρησιμοποιήσετε είτε getTacoTranslateStaticProps είτε getTacoTranslateServerSideProps με βάση τις απαιτήσεις σας.

Αυτές οι συναρτήσεις λαμβάνουν τρία ορίσματα: Ένα Next.js Static Props Context αντικείμενο, ρύθμιση παραμέτρων για TacoTranslate και προαιρετικές ιδιότητες Next.js. Λάβετε υπόψη ότι το revalidate on 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: Αναπτύξτε και δοκιμάστε!

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

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

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