Πώς να υλοποιήσετε την διεθνοποίηση σε μια εφαρμογή 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 μεταφράζει αυτόματα τις συμβολοσειρές σας σε οποιαδήποτε γλώσσα χρησιμοποιώντας προηγμένη AI τεχνολογία και σας απαλλάσσει από τη χρονοβόρα διαχείριση αρχείων JSON.
Ας το εγκαταστήσουμε χρησιμοποιώντας npm στο τερματικό σας:
npm install tacotranslate
Βήμα 2: Δημιουργήστε έναν δωρεάν λογαριασμό στο TacoTranslate
Τώρα που έχετε εγκαταστήσει το module, ήρθε η ώρα να δημιουργήσετε τον λογαριασμό σας στο TacoTranslate, ένα έργο μετάφρασης και τα αντίστοιχα API keys. Δημιουργήστε έναν λογαριασμό εδώ. Είναι δωρεάν και δεν απαιτείται να προσθέσετε πιστωτική κάρτα.
Μέσα στο περιβάλλον χρήστη της εφαρμογής 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
: Ο προεπιλεγμένος κωδικός γλώσσας απόρριψης. Σε αυτό το παράδειγμα, θα τον ορίσουμε σεen
για τα Αγγλικά.TACOTRANSLATE_ORIGIN
: Ο «φάκελος» όπου θα αποθηκεύονται οι φράσεις σας, όπως η διεύθυνση URL του ιστότοπού σας. Διαβάστε περισσότερα για τα Origins εδώ.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Βήμα 3: Ρύθμιση του TacoTranslate
Για να ενσωματώσετε το TacoTranslate στην εφαρμογή σας, θα χρειαστεί να δημιουργήσετε έναν πελάτη χρησιμοποιώντας τα API keys που αναφέρθηκαν νωρίτερα. Για παράδειγμα, δημιουργήστε ένα αρχείο με όνομα /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 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 γρήγορα προς και από πάνω από 75 γλώσσες. Ξεκινήστε σήμερα!