Η καλύτερη λύση για τη διεθνοποίηση (i18n) στις εφαρμογές Next.js
Ψάχνετε να διευρύνετε την εφαρμογή σας Next.js σε νέες αγορές; Το TacoTranslate καθιστά απίστευτα εύκολη τη διαδικασία τοπικοποίησης του Next.js έργου σας, επιτρέποντάς σας να φτάσετε σε ένα παγκόσμιο κοινό χωρίς κόπο.
Γιατί να επιλέξετε το TacoTranslate για το Next.js;
- Απρόσκοπτη Ενσωμάτωση: Σχεδιασμένο ειδικά για εφαρμογές Next.js, το TacoTranslate ενσωματώνεται εύκολα στην υπάρχουσα ροή εργασίας σας.
- Αυτόματη Συλλογή Κειμένων: Τέλος στη χειροκίνητη διαχείριση αρχείων JSON. Το TacoTranslate συλλέγει αυτόματα κείμενα από τη βάση κώδικά σας.
- Μεταφράσεις με Τεχνητή Νοημοσύνη: Αξιοποιήστε τη δύναμη της ΤΝ για να παρέχετε μεταφράσεις που είναι ακριβείς και συμφραζόμενες, προσαρμοσμένες στον τόνο της εφαρμογής σας.
- Άμεση Υποστήριξη Γλωσσών: Προσθέστε υποστήριξη για νέες γλώσσες με ένα μόνο κλικ, κάνοντας την εφαρμογή σας προσβάσιμη παγκοσμίως.
Πώς λειτουργεί
Καθώς ο κόσμος γίνεται όλο και πιο παγκοσμιοποιημένος, γίνεται ολοένα και πιο σημαντικό για τους προγραμματιστές ιστοσελίδων να δημιουργούν εφαρμογές που μπορούν να εξυπηρετήσουν χρήστες από διαφορετικές χώρες και κουλτούρες. Ένας από τους βασικούς τρόπους για να επιτευχθεί αυτό είναι μέσω της διεθνοποίησης (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 στην εφαρμογή σας, θα χρειαστεί να δημιουργήσετε έναν client χρησιμοποιώντας τα 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. Εάν βρισκόμαστε σε τοπικό, δοκιμαστικό ή σκηνικό περιβάλλον (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, προσθέτοντας νέες συμβολοσειρές πριν από το live. Αυτό θα εμποδίσει οποιονδήποτε να κλέψει το μυστικό σας API key και ενδεχομένως να φουσκώσει το project των μεταφράσεών σας προσθέτοντας νέες, άσχετες συμβολοσειρές.
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!