Πώς να μεταφράσετε αρχεία JSON i18next σε React & Next.js (2026)

Μόλις ολοκληρώσατε μια εφαρμογή React που πρέπει να κυκλοφορήσει σε 12 γλώσσες μέχρι την επόμενη Παρασκευή. Τα αρχεία τοπικών ρυθμίσεων βρίσκονται στο public/locales/en/common.json, έχετε 340 κλειδιά ανά τοπική ρύθμιση και τα tokens μέσα στις συμβολοσειρές σας μοιάζουν με {{userName}} και {{count}} διάσπαρτα σε εμφωλευμένα αντικείμενα. Επικολλάτε το JSON στο ChatGPT και αυτό επιστρέφει {{ nombreUsuario }}, επιπλέον κενά και τα μισά κλειδιά πληθυντικού μετονομασμένα. Η εφαρμογή σας κολλάει κατά την κατασκευή.

Αν έχετε προσπαθήσει να αυτοματοποιήσετε τη μετάφραση JSON i18next, γνωρίζετε αυτόν τον πόνο. Η μορφή JSON είναι ευέλικτη, και αυτός ακριβώς είναι ο λόγος που τα περισσότερα εργαλεία μετάφρασης την παραμορφώνουν. Το πραγματικό πρόβλημα δεν είναι η ποιότητα του γλωσσικού μοντέλου - είναι ότι τα εργαλεία AI καταναλωτικού επιπέδου δεν κατανοούν τους δομικούς κανόνες του i18next.

Αυτός ο οδηγός αναλύει τι κάνει το i18next JSON διαφορετικό από άλλες μορφές τοπικών ρυθμίσεων, γιατί οι απλοϊκές προσεγγίσεις μετάφρασης χαλούν τις εφαρμογές React και Next.js και πώς να αυτοματοποιήσετε τη μετάφραση με ασφάλεια σε δεκάδες τοπικές ρυθμίσεις χωρίς να ελέγχετε χειροκίνητα κάθε κλειδί.

Τι είναι το i18next JSON και γιατί η μετάφραση είναι περίπλοκη

Το i18next είναι η πιο ευρέως χρησιμοποιούμενη βιβλιοθήκη i18n στο οικοσύστημα JavaScript. Τροφοδοτεί το React (react-i18next), το Next.js (next-i18next, App Router next-intl), το Vue και τις υπηρεσίες backend του Node. Αποθηκεύει μεταφράσιμες συμβολοσειρές σε επίπεδα ή εμφωλευμένα αρχεία JSON, ένα ανά τοπική ρύθμιση.

Ένα τυπικό αρχείο μοιάζει με αυτό:

{
  "welcome": "Welcome, {{userName}}!",
  "cart": {
    "empty": "Your cart is empty",
    "items_one": "{{count}} item in your cart",
    "items_other": "{{count}} items in your cart"
  },
  "errors": {
    "network": "Network error. <strong>Please retry</strong>."
  }
}

Αυτό φαίνεται απλό, αλλά τρία πράγματα το καθιστούν επικίνδυνο να μεταφραστεί με γενικής χρήσης AI.

Τα Tokens Παρεμβολής είναι Δομικά, Όχι Κείμενο

Η ακολουθία {{userName}} δεν είναι μια λέξη - είναι ένας placeholder που το runtime αντικαθιστά με δεδομένα. Προσθέστε ένα κενό ({{ userName }}), μετονομάστε το ή μεταφράστε τον εσωτερικό αναγνωριστικό και το runtime αποτυχαίνει σιωπηλά ή πετάει εξαίρεση. Ορισμένοι μεταφραστές μετατρέπουν χρήσιμα το {{count}} σε {{conteo}} στα Ισπανικά. Η εφαρμογή σας τώρα προσπαθεί να παρεμβάλει μια μεταβλητή που δεν υπάρχει και αποδίδει τον ανεπεξέργαστο placeholder στον χρήστη σας.

Τα Κλειδιά Πληθυντικού είναι Μαγικές Καταλήξεις

Το i18next ανιχνεύει τους πληθυντικούς με καταλήξεις: _zero, _one, _two, _few, _many, _other. Αυτές δεν είναι αυθαίρετες συμβολοσειρές – πρέπει να ταιριάζουν με τις κατηγορίες πληθυντικού του CLDR για την τοπική ρύθμιση-στόχο. Τα Αγγλικά χρησιμοποιούν μόνο _one και _other. Τα Ρωσικά, τα Αραβικά και τα Πολωνικά χρησιμοποιούν έως και έξι κατηγορίες. Εάν ο μεταφραστής σας παραλείψει το _other ή το μετονομάσει, η αλυσίδα εφεδρείας σπάει.

Τα Εμφωλευμένα Κλειδιά Πρέπει να Παραμένουν Άθικτα

Σε αντίθεση με τα αρχεία .po του Gettext, τα οποία είναι επίπεδα ζεύγη κλειδιών-τιμών, τα αρχεία i18next μπορούν να εμφωλεύονται αυθαίρετα. Ένας τεμπέλης μεταφραστής μπορεί να ισοπεδώσει τη δομή, να αλλάξει τα ονόματα των κλειδιών για να ταιριάζουν με το μεταφρασμένο κείμενο ή να αναδιατάξει τα αντικείμενα. Η κλήση t('cart.items_other') στον κώδικα δεν επιλύεται πλέον.

Κακές Λύσεις που Δοκιμάζουν Πρώτα οι Προγραμματιστές

Κάθε ομάδα περνάει από τον ίδιο κύκλο αποτυχίας τριών σταδίων πριν επενδύσει σε μια πραγματική λύση.

Στάδιο Πρώτο: Επικόλληση στο ChatGPT

Αντιγράφετε 200 κλειδιά στο ChatGPT, ρωτάτε "μετάφρασε αυτό το JSON στα Ισπανικά" και επικολλάτε το αποτέλεσμα πίσω. Λειτουργεί για 180 κλειδιά. Είκοσι έχουν προστεθεί κενά μέσα στο {{...}}, τρία έχουν αναγραφεί εκ νέου οι καταλήξεις πληθυντικού, και μια ετικέτα <strong> μεταφράστηκε σε <fuerte>. Η κατασκευή σας είτε αποτυγχάνει είτε παραδίδει σιωπηλά χαλασμένες συμβολοσειρές στην παραγωγή.

Στάδιο Δεύτερο: Google Translate API

Συνδέετε το Google Translate REST API, επαναλαμβάνετε πάνω στο JSON σας και στέλνετε κάθε τιμή. Η ταχύτητα είναι εξαιρετική. Η ποιότητα όχι. Το API της Google αντιμετωπίζει κάθε συμβολοσειρά απομονωμένα - χωρίς πλαίσιο σχετικά με την εφαρμογή σας, χωρίς κατανόηση ότι το {{count}} είναι ένας placeholder, χωρίς επίγνωση ότι το κλειδί cart.empty είναι διαφορετικό από το cart.items_one. Χρειάζεστε ακόμα ανθρώπινη αναθεώρηση σε κάθε κλειδί.

Στάδιο Τρίτο: Εμπορικές Πλατφόρμες TMS

Εγγράφεστε σε ένα σύστημα διαχείρισης μεταφράσεων. Χρεώνουν ανά λέξη, απαιτούν ενσωματώσεις GitHub και σας δεσμεύουν σε μηνιαίες θέσεις. Για ένα προσωπικό έργο ή μια ανεξάρτητη εφαρμογή, τα οικονομικά καταρρέουν γρήγορα – και εξακολουθείτε να αντιμετωπίζετε τα ίδια προβλήματα αλλοίωσης placeholder εάν η μηχανή τους δεν αναλύει συγκεκριμένα τη μορφή i18next.

Οι ίδιες λειτουργίες αποτυχίας εμφανίζονται και στις ροές εργασίας του Gettext. Ο οδηγός μας για το πώς να μεταφράσετε αρχεία .po χωρίς να χαλάσετε τις μεταβλητές κώδικα καλύπτει το παράλληλο πρόβλημα για το WordPress και άλλες στοίβες βασισμένες στο Gettext.

Η Ασφαλής Προσέγγιση: Μετάφραση με Επίγνωση Σύνταξης

Ο μόνος αξιόπιστος τρόπος για να μεταφράσετε i18next JSON σε κλίμακα είναι με ένα εργαλείο που αναλύει πρώτα τη μορφή, κλειδώνει τη σύνταξη και στέλνει μόνο μεταφράσιμο κείμενο στην AI.

Δείτε τι κάνει η επεξεργασία με επίγνωση σύνταξης κάτω από το περίβλημα:

1. Αναλύει το JSON σε ένα αφηρημένο δέντρο, διατηρώντας τις διαδρομές των κλειδιών και την εμφώλευση.
2. Αναγνωρίζει τα tokens παρεμβολής ({{name}}, {{count, number}}, {{date, datetime}}) και τα αντικαθιστά με αναγνωριστικά placeholder.
3. Αναγνωρίζει τις ετικέτες HTML μέσα στα components Trans (<0>, <strong>, <br/>) και τις κλειδώνει.
4. Ανιχνεύει τα κλειδιά πληθυντικού με κατάληξη και τα αντιστοιχίζει με τους κανόνες CLDR για την τοπική ρύθμιση-στόχο.
5. Στέλνει μόνο το καθαρισμένο κείμενο στο LLM με πλαίσιο σχετικά με τη διαδρομή του κλειδιού.
6. Επανατοποθετεί τα αρχικά tokens και τις ετικέτες στις ακριβείς θέσεις τους.
7. Επικυρώνει την έξοδο - εάν λείπει ή είναι ακατάλληλος κάποιος placeholder, επιστρέφει στην πηγή.

Αυτή είναι η ίδια αρχή που καθιστά ασφαλή τη μετάφραση PO που βασίζεται στο cloud. Εάν είστε περίεργοι για την υποκείμενη αρχιτεκτονική, η σύγκριση ποιότητας μετάφρασης AI αναλύει πώς διαφορετικά LLM χειρίζονται αυτούς τους περιορισμούς.

Βήμα προς Βήμα: Μεταφράστε i18next JSON με το SimplePoTranslate

Το SimplePoTranslate υποστηρίζει εγγενώς i18next JSON στα προγράμματα Pro και Lifetime. Η δωρεάν έκδοση καλύπτει επί του παρόντος .po και .pot - αναβαθμίστε ή χρησιμοποιήστε μια δοκιμαστική έκδοση για πρόσβαση σε JSON.

1. Προετοιμάστε το Αρχείο Πηγής σας

Χρησιμοποιήστε το αρχείο σας στα Αγγλικά (ή την τοπική ρύθμιση πηγής) ως κύριο. Βεβαιωθείτε ότι είναι έγκυρο JSON και περιέχει όλα τα κλειδιά που χρησιμοποιεί η εφαρμογή σας. Ένα κοινό λάθος είναι να αφήνετε παλιά ή αχρησιμοποίητα κλειδιά, γεγονός που καταναλώνει το όριο μετάφρασής σας για συμβολοσειρές που δεν θα αποδώσετε ποτέ.

# From your project root
cp public/locales/en/common.json ~/Desktop/common.json

2. Ανεβάστε στο SimplePoTranslate

Συνδεθείτε στο ταμπλό σας, κάντε κλικ στο Νέα Μετάφραση και ανεβάστε το common.json. Η πλατφόρμα ανιχνεύει αυτόματα τη μορφή i18next. Επιλέξτε τη γλώσσα-στόχο σας από τις 41 υποστηριζόμενες τοπικές ρυθμίσεις, επιλέξτε έναν τόνο (επαγγελματικός, χαλαρός, μάρκετινγκ) και υποβάλετε.

3. Αφήστε τη Μηχανή να Δουλέψει

Κάτω από το περίβλημα, το αρχείο αναλύεται, τεμαχίζεται σε ασφαλείς παρτίδες και μεταφράζεται παράλληλα. Τα tokens παρεμβολής είναι κλειδωμένα. Οι καταλήξεις πληθυντικού διατηρούνται και αντιστοιχίζονται στους κανόνες CLDR της τοπικής ρύθμισης-στόχου. Το HTML μέσα στα components Trans παραμένει άθικτο.

4. Κατεβάστε το ZIP

Λαμβάνετε ένα αρχείο ZIP που περιέχει το μεταφρασμένο JSON συν εναλλακτικές μορφές (.php για εφαρμογές PHP, .po για συμβατότητα μεταξύ εργαλείων). Ρίξτε το JSON στο public/locales/es/common.json και αναπτύξτε ξανά.

unzip common_es.zip
mv common.json public/locales/es/common.json
npm run build

5. Επανάληψη ή Ομαδική Επεξεργασία

Για όλες τις 12 τοπικές ρυθμίσεις-στόχους, υποβάλετε 12 εργασίες. Τα όρια του προγράμματος Pro καλύπτουν δεκάδες τυπικές εφαρμογές SaaS. Για monorepos με πολλά αρχεία namespace, ανεβάστε το καθένα ξεχωριστά ή επεξεργαστείτε τα σε παρτίδες διαδοχικά.

Ενσωμάτωση Μεταφράσεων Πίσω στην Εφαρμογή σας

Μόλις έχετε μεταφρασμένα αρχεία JSON, η ενσωμάτωση είναι το εύκολο κομμάτι. Μερικές παγίδες:

• Επαληθεύστε τις κατηγορίες πληθυντικού. Εκτελέστε ένα γρήγορο smoke test ανά τοπική ρύθμιση: αποδώστε ένα component με count={0}, count={1}, count={5} και επιβεβαιώστε ότι και τα τρία παράγουν τη σωστή συμβολοσειρά.
• Ελέγξτε τις τοπικές ρυθμίσεις RTL. Εάν μεταφράσατε στα Αραβικά, Εβραϊκά ή Περσικά, το UI σας χρειάζεται RTL-aware CSS. Ο οδηγός μας μετάφρασης RTL του WordPress καλύπτει τα πρότυπα CSS που ισχύουν και για τις εφαρμογές React.
• Ρυθμίστε μια αλυσίδα εφεδρείας. Διαμορφώστε το i18next να επιστρέφει στα Αγγλικά εάν λείπει ένα κλειδί, ώστε οι ενδιάμεσες καταστάσεις ανάπτυξης να μην προκαλούν σφάλματα στους χρήστες.
• Κλειδώστε το αρχείο πηγής σας στο CI. Προσθέστε έναν έλεγχο που απορρίπτει τα PRs όπου το en/common.json αλλάζει χωρίς να αναδημιουργούνται άλλες τοπικές ρυθμίσεις. Η απόκλιση μετάφρασης είναι η μεγαλύτερη αιτία σφαλμάτων i18n στην παραγωγή.

Για ομάδες που παραδίδουν σε React, Next.js και server side, η παραγωγή κάθε μορφής από μία πηγή είναι ένα τεράστιο πλεονέκτημα. Η ανάρτησή μας για το ένα αρχείο μέσα, πέντε μορφές έξω εξηγεί γιατί η έξοδος πολλαπλών μορφών είναι σημαντική για τη μακροπρόθεσμη συντήρηση.

Όταν το JSON δεν Αρκεί: Χειρισμός Πολύπλοκων Περιπτώσεων

Λίγες ακραίες περιπτώσεις χρειάζονται επιπλέον προσοχή.

ICU MessageFormat

Εάν το έργο σας χρησιμοποιεί σύνταξη ICU ({count, plural, one {1 item} other {# items}}), το i18next το αντιμετωπίζει ως παρεμβολή, αλλά η δομή είναι πιο σύνθετη. Βεβαιωθείτε ότι το εργαλείο μετάφρασης αναγνωρίζει τις παραμέτρους ICU και δεν μεταφράζει ονόματα κατηγοριών όπως one, other ή αναγνωριστικά μορφής όπως plural, number, date.

Component Trans με Κόμβους React

Το <Trans> αποδίδει components React μέσα σε μεταφρασμένες συμβολοσειρές, με κλειδιά ανά δείκτη (<0>, <1>). Ο μεταφραστής πρέπει να διατηρεί την ακριβή σειρά των ετικετών. Το syntax lock του SimplePoTranslate το χειρίζεται αυτό, αλλά αν χρησιμοποιείτε ένα διαφορετικό εργαλείο, επαληθεύστε πριν την παράδοση.

Αρχεία Namespace

Οι μεγάλες εφαρμογές χωρίζουν τις τοπικές ρυθμίσεις σε namespaces: common.json, dashboard.json, checkout.json. Μεταφράστε κάθε αρχείο ανεξάρτητα – μην τα συγχωνεύετε. Η ποιότητα του πλαισίου είναι υψηλότερη όταν οι διαδρομές κλειδιών κάθε namespace παραμένουν περιορισμένες.

Συγκεντρώνοντας τα Πάντα

Η μετάφραση i18next JSON για μια εφαρμογή React ή Next.js δεν αφορά την επιλογή του καλύτερου μοντέλου AI. Αφορά τον σεβασμό των δομικών κανόνων της μορφής: οι παρεμβολές, οι καταλήξεις πληθυντικού, τα εμφωλευμένα κλειδιά και οι ετικέτες HTML πρέπει να επιβιώσουν στο ταξίδι. Τα καταναλωτικά εργαλεία AI αντιμετωπίζουν το JSON ως μη δομημένο κείμενο. Τα εργαλεία με επίγνωση σύνταξης το αναλύουν ως δομημένα δεδομένα και αγγίζουν μόνο τις μεταφράσιμες επιφάνειες.

Αν κυκλοφορείτε μια πολύγλωσση εφαρμογή και αντιγράφετε-επικολλάτε JSON σε διεπαφές συνομιλίας, γνωρίζετε ήδη το κόστος: ώρες χειροκίνητης αναθεώρησης ανά τοπική ρύθμιση, τυχαία σφάλματα παραγωγής και μια αυξανόμενη στοίβα από χαλασμένες μορφές πληθυντικού. Μια διοχέτευση με επίγνωση μορφής εξαλείφει κάθε έναν από αυτούς τους τρόπους αποτυχίας.

Έτοιμοι να μεταφράσετε τα αρχεία JSON i18next με ασφάλεια; Δοκιμάστε το SimplePoTranslate δωρεάν - δεν απαιτείται πιστωτική κάρτα. Ανεβάστε μία φορά, κυκλοφορήστε σε 41 γλώσσες.