Πώς να εφαρμόσετε τη διεθνοποίηση σε μια εφαρμογή Next.js που χρησιμοποιεί τον Pages Router
Κάντε την εφαρμογή React σας πιο προσβάσιμη και προσεγγίστε νέες αγορές με τη διεθνοποίηση (i18n).
Καθώς ο κόσμος γίνεται όλο και πιο παγκοσμιοποιημένος, είναι ολοένα και πιο σημαντικό για τους προγραμματιστές ιστού να δημιουργούν εφαρμογές που μπορούν να εξυπηρετήσουν χρήστες από διαφορετικές χώρες και πολιτισμούς. Ένας από τους βασικούς τρόπους για να επιτευχθεί αυτό είναι μέσω της διεθνοποίησης (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 keys. Δημιουργήστε ένα 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 του ιστότοπού σας. Διαβάστε περισσότερα σχετικά με τις προελεύσεις εδώ.
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: Ανάπτυξη και δοκιμή!
Τελειώσαμε! Η εφαρμογή React σας θα μεταφράζεται τώρα αυτόματα όταν προσθέτετε οποιεσδήποτε συμβολοσειρές σε ένα Translate
component. Σημειώστε ότι μόνο τα περιβάλλοντα με δικαιώματα read/write
στο κλειδί API θα μπορούν να δημιουργούν νέες συμβολοσειρές προς μετάφραση. Συνιστούμε να έχετε ένα κλειστό και ασφαλές περιβάλλον staging όπου μπορείτε να δοκιμάσετε την εφαρμογή παραγωγής σας με ένα τέτοιο κλειδί API, προσθέτοντας νέες συμβολοσειρές πριν το θέσετε σε παραγωγή. Αυτό θα αποτρέψει οποιονδήποτε οποιονδήποτε από το να κλέψει το μυστικό σας κλειδί API και, ενδεχομένως, να διογκώσει το έργο μετάφρασής σας προσθέτοντας νέες, άσχετες συμβολοσειρές.
Μην παραλείψετε να δείτε το πλήρες παράδειγμα στο προφίλ μας στο GitHub. Εκεί θα βρείτε επίσης ένα παράδειγμα για το πώς να το κάνετε αυτό χρησιμοποιώντας τον App Router! Εάν αντιμετωπίσετε οποιοδήποτε πρόβλημα, μη διστάσετε να επικοινωνήσετε μαζί μας, και θα χαρούμε πολύ να σας βοηθήσουμε.
Το TacoTranslate σας επιτρέπει να τοπικοποιείτε αυτόματα τις εφαρμογές React σας γρήγορα σε και από πάνω από 75 γλώσσες. Ξεκινήστε σήμερα!