M

MLOG

Ελληνικά

Μάθετε πώς να υλοποιείτε απρόσκοπτη διεθνοποίηση (i18n) στις εφαρμογές σας Next.js για να προσεγγίσετε ένα παγκόσμιο κοινό. Καλύπτει routing, μετάφραση περιεχομένου και βέλτιστες πρακτικές.

Διεθνοποίηση Next.js: Δημιουργία Πολυγλωσσικών Εφαρμογών για ένα Παγκόσμιο Κοινό

Στον σημερινό διασυνδεδεμένο κόσμο, η δημιουργία εφαρμογών που απευθύνονται σε ένα παγκόσμιο κοινό δεν είναι πλέον πολυτέλεια – είναι αναγκαιότητα. Το Next.js, ένα ισχυρό framework της React, παρέχει στιβαρές δυνατότητες για την υλοποίηση της διεθνοποίησης (i18n), επιτρέποντάς σας να δημιουργείτε πολυγλωσσικές εφαρμογές που προσφέρουν μια τοπικοποιημένη εμπειρία σε χρήστες παγκοσμίως. Αυτός ο αναλυτικός οδηγός θα σας καθοδηγήσει στις βασικές έννοιες, τεχνικές και βέλτιστες πρακτικές για τη δημιουργία διεθνοποιημένων εφαρμογών Next.js.

Κατανόηση της Διεθνοποίησης και της Τοπικοποίησης

Πριν εμβαθύνουμε στις ιδιαιτερότητες του i18n στο Next.js, ας διευκρινίσουμε τους βασικούς όρους:

Ουσιαστικά, η διεθνοποίηση (i18n) προετοιμάζει την εφαρμογή σας για την τοπικοποίηση. Διαχωρίζοντας τα γλωσσικά εξαρτώμενα στοιχεία από τον πυρήνα του κώδικα, καθιστάτε ευκολότερη την τοπικοποίηση της εφαρμογής για διαφορετικές αγορές.

Γιατί να Εφαρμόσετε Διεθνοποίηση στο Next.js;

Η υλοποίηση i18n στην εφαρμογή σας Next.js προσφέρει πολλά οφέλη:

Δυνατότητες και Διαμόρφωση i18n στο Next.js

Το Next.js προσφέρει ενσωματωμένη υποστήριξη για i18n μέσω των δυνατοτήτων δρομολόγησης (routing) και διαχείρισης περιεχομένου. Ακολουθεί μια ανάλυση των σημαντικών χαρακτηριστικών:

1. Διαμόρφωση i18n στο next.config.js

Η βασική διαμόρφωση για το i18n βρίσκεται στο αρχείο next.config.js. Εδώ είναι ένα παράδειγμα:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'el'], // Ένας πίνακας με τις υποστηριζόμενες τοπικές ρυθμίσεις (κωδικοί γλώσσας)
    defaultLocale: 'en', // Η προεπιλεγμένη τοπική ρύθμιση προς χρήση
    localeDetection: true, // Ενεργοποίηση/απενεργοποίηση αυτόματης ανίχνευσης τοπικής ρύθμισης βάσει των ρυθμίσεων του προγράμματος περιήγησης (προαιρετικό)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Επεξήγηση:

2. Δρομολόγηση με Προθέματα Locale

Το Next.js προσθέτει αυτόματα προθέματα στις διαδρομές (routes) με το locale. Για παράδειγμα, αν έχετε μια σελίδα στο /about και το locale είναι 'es' (Ισπανικά), το URL θα γίνει /es/about. Αυτό επιτρέπει διαφορετικές γλωσσικές εκδόσεις των σελίδων και δίνει τη δυνατότητα στις μηχανές αναζήτησης να ευρετηριάζουν το περιεχόμενο για κάθε locale. Το framework διαχειρίζεται την ανακατεύθυνση και τη δρομολόγηση για εσάς.

3. Χρήση του Hook useRouter

Το hook useRouter από το next/router παρέχει πρόσβαση στο τρέχον locale και άλλες πληροφορίες δρομολόγησης.


import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const { locale, locales, defaultLocale } = router;

  return (
    

      
Τρέχον locale: {locale}

      
Διαθέσιμα locales: {locales.join(', ')}

      
Προεπιλεγμένο locale: {defaultLocale}

    

  );
}

export default MyComponent;

Το αντικείμενο router προσφέρει τις ακόλουθες βασικές ιδιότητες:

Στρατηγικές Μετάφρασης Περιεχομένου

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

1. Χρήση ενός Εξειδικευμένου Συστήματος Διαχείρισης Μεταφράσεων (TMS)

Για έργα μεγάλης κλίμακας με πολλές γλώσσες, συνιστάται ανεπιφύλακτα η χρήση ενός TMS. Δημοφιλείς επιλογές περιλαμβάνουν:

Οφέλη:

2. Δημιουργία Αρχείων Μετάφρασης JSON

Για μικρότερα έργα, η χρήση αρχείων JSON για την αποθήκευση των μεταφράσεων είναι μια απλή και αποτελεσματική μέθοδος.

Παράδειγμα Δομής Καταλόγου:


/src
├── locales
│   ├── en.json
│   └── el.json
├── components
│   └── MyComponent.js
└── pages
    └── index.js

Παράδειγμα en.json:


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

Παράδειγμα el.json:


{
  "greeting": "Γεια σου, κόσμε!",
  "welcomeMessage": "Καλώς ήρθατε στον ιστότοπό μας."
}

Παράδειγμα MyComponent.js:


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import el from '../locales/el.json';

function MyComponent() {
  const { locale } = useRouter();
  const t = locale === 'el' ? el : en;

  return (
    

      
{t.greeting}

      
{t.welcomeMessage}

    

  );
}

export default MyComponent;

Αυτή η προσέγγιση παρέχει ευελιξία και είναι απλή για μικρότερα έργα. Είναι γενικά εύκολη στην ενημέρωση και συντήρηση.

3. Χρήση μιας Βιβλιοθήκης Μετάφρασης

Αρκετές βιβλιοθήκες JavaScript απλοποιούν τη μετάφραση περιεχομένου μέσα στα components σας React.

Παράδειγμα με next-i18next (Εγκατάσταση: npm install next-i18next i18next react-i18next):

Δημιουργήστε ένα αρχείο διαμόρφωσης i18n (π.χ., i18n.js στον ριζικό σας κατάλογο):


// i18n.js
import { createServerSideHelpers } from 'next-i18next'
import { i18n } from './next-i18next.config'

export function initI18next(req, res, namespaces = ['common']) {
  const helpers = createServerSideHelpers(
    req, 
    res, 
    i18n, 
    namespaces
  )

  return helpers
}

export { appWithTranslation } from 'next-i18next'
export { i18n }

Δημιουργήστε τη διαμόρφωση του Next.js για το next-i18next.


// next-i18next.config.js
const { i18n } = require('./next-i18next.config');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'el'],
  },
  // άλλη διαμόρφωση
}

module.exports = nextConfig

Προσθέστε τη διαμόρφωση και την εισαγωγή μετάφρασης στο _app.js σας:


import { appWithTranslation } from 'next-i18next';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return ;
}

export default appWithTranslation(MyApp);

Δημιουργήστε έναν φάκελο και γεμίστε τον με τα locales για τις μεταφράσεις σας.


/public
└── locales
    ├── en
    │   └── common.json
    ├── es
    │   └── common.json
    └── el
        └── common.json

Παράδειγμα en/common.json:


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

Χρήση της μετάφρασης σε ένα component:


import { useTranslation } from 'next-i18next';

function MyComponent() {
  const { t } = useTranslation('common');

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

Αυτό το παράδειγμα χρησιμοποιεί το hook useTranslation για να ανακτήσει μεταφράσεις με βάση το τρέχον locale.

Χειρισμός Δυναμικών Διαδρομών και Static Site Generation (SSG)

Η διεθνοποίηση γίνεται πιο περίπλοκη όταν ασχολούμαστε με δυναμικές διαδρομές (π.χ., αναρτήσεις ιστολογίου, σελίδες προϊόντων) και static site generation (SSG).

1. Δυναμικές Διαδρομές (π.χ., /blog/[slug])

Για δυναμικές διαδρομές, θα χρειαστεί να δημιουργήσετε τις σωστές διαδρομές για κάθε locale κατά τη διάρκεια του build time χρησιμοποιώντας το getStaticPaths. Αυτή η συνάρτηση επιστρέφει έναν πίνακα από διαδρομές που το Next.js πρέπει να προ-αποδώσει (pre-render).


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'el'];
  const posts = await fetchPosts(); // Ανάκτηση δεδομένων αναρτήσεων ιστολογίου

  posts.forEach(post => {
    locales.forEach(locale => {
      paths.push({
        params: {
          slug: post.slug,
        },
        locale,
      });
    });
  });

  return {
    paths,
    fallback: false, // ή 'blocking' αν θέλετε να δείξετε κατάσταση φόρτωσης
  };
}

export async function getStaticProps({ params, locale }) {
  const post = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

Επεξήγηση:

2. Static Site Generation (SSG) με getStaticProps

Στο getStaticProps, μπορείτε να ανακτήσετε μεταφρασμένο περιεχόμενο με βάση την παράμετρο locale.


export async function getStaticProps({ params, locale }) {
  // Ανάκτηση περιεχομένου με βάση το locale και τις παραμέτρους
  const { post } = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

Η συνάρτηση getPostBySlug θα πρέπει να ανακτά το μεταφρασμένο περιεχόμενο για το δεδομένο slug και locale, το οποίο θα μπορούσε να ανακτηθεί από τα αρχεία μετάφρασης, τη βάση δεδομένων ή ένα CMS.

3. Server-Side Rendering (SSR) με getServerSideProps

Για περιεχόμενο που πρέπει να ανακτηθεί κατά το χρόνο του αιτήματος, χρησιμοποιήστε το getServerSideProps. Αυτό είναι χρήσιμο εάν το περιεχόμενο αλλάζει συχνά ή είναι εξατομικευμένο για κάθε χρήστη.


export async function getServerSideProps({ params, locale, req, res }) {
  // Ανάκτηση δεδομένων με βάση το locale και τις παραμέτρους (π.χ., από μια βάση δεδομένων)
  const data = await fetchData(params.slug, locale);

  return {
    props: {
      data,
    },
  };
}

Βέλτιστες Πρακτικές για τη Διεθνοποίηση στο Next.js

Η τήρηση αυτών των βέλτιστων πρακτικών θα σας βοηθήσει να δημιουργήσετε στιβαρές, συντηρήσιμες και φιλικές προς το χρήστη πολυγλωσσικές εφαρμογές:

Ζητήματα SEO για Διεθνοποιημένους Ιστότοπους

Η βελτιστοποίηση του διεθνοποιημένου ιστότοπού σας για τις μηχανές αναζήτησης είναι απαραίτητη για την προσέλκυση οργανικής επισκεψιμότητας από όλο τον κόσμο. Ακολουθούν ορισμένες βασικές βέλτιστες πρακτικές SEO:

Παράδειγμα: Δημιουργία ενός Απλού Πολυγλωσσικού Ιστολογίου

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

1. Εγκατάσταση του Έργου

Δημιουργήστε ένα νέο έργο Next.js:


npx create-next-app my-multi-lang-blog
cd my-multi-lang-blog

2. Διαμόρφωση i18n (next.config.js)


/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    locales: ['en', 'es', 'el'],
    defaultLocale: 'en',
  },
}

module.exports = nextConfig

3. Δημιουργία Αρχείων Μετάφρασης

Δημιουργήστε έναν φάκελο locales στον ριζικό κατάλογο και προσθέστε τα ακόλουθα αρχεία JSON:

locales/en.json:


{
  "title": "Welcome to My Blog",
  "postTitle": "My First Post",
  "postContent": "This is the content of my first blog post."
}

locales/es.json:


{
  "title": "Bienvenido a mi Blog",
  "postTitle": "Mi Primer Post",
  "postContent": "Este es el contenido de mi primer publicación de blog."
}

locales/el.json:


{
  "title": "Καλώς ήρθατε στο Blog μου",
  "postTitle": "Το Πρώτο μου Άρθρο",
  "postContent": "Αυτό είναι το περιεχόμενο της πρώτης μου ανάρτησης στο blog."
}

4. Δημιουργία του Component για την Ανάρτηση Ιστολογίου (π.χ., components/BlogPost.js)


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';
import el from '../locales/el.json';

function BlogPost() {
  const router = useRouter();
  const { locale } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'el':
      translations = el;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.postTitle}

      
{translations.postContent}

    

  );
}

export default BlogPost;

5. Δημιουργία της Αρχικής Σελίδας (pages/index.js)


import { useRouter } from 'next/router';
import BlogPost from '../components/BlogPost';
import en from '../locales/en.json';
import es from '../locales/es.json';
import el from '../locales/el.json';

function HomePage() {
  const router = useRouter();
  const { locale, locales } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'el':
      translations = el;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.title}

      
      

        {locales.map((l) => (
          
            {l.toUpperCase()}
          
        ))}
      

    

  );
}

export default HomePage;

Αυτό το απλοποιημένο παράδειγμα παρουσιάζει τις θεμελιώδεις αρχές της διεθνοποίησης στο Next.js. Μπορείτε να επεκτείνετε αυτό το βασικό πλαίσιο για να συμπεριλάβετε πιο σύνθετες δυνατότητες, όπως δυναμικές διαδρομές και ενσωμάτωση με συστήματα διαχείρισης μεταφράσεων. Εξετάστε το ενδεχόμενο να βελτιώσετε τους παραπάνω συνδέσμους με το component Link και να προσθέσετε το κατάλληλο χαρακτηριστικό locale.

6. Εκτέλεση της Εφαρμογής

Εκτελέστε την εφαρμογή με:


npm run dev

Τώρα μπορείτε να έχετε πρόσβαση στο blog σας στο http://localhost:3000 (Αγγλικά), http://localhost:3000/es (Ισπανικά), και http://localhost:3000/el (Ελληνικά). Θα πρέπει να δείτε τον τίτλο και το περιεχόμενο της ανάρτησης του blog μεταφρασμένα με βάση το επιλεγμένο locale.

Συμπέρασμα

Το Next.js παρέχει ένα ολοκληρωμένο σύνολο δυνατοτήτων για την υλοποίηση της διεθνοποίησης στις εφαρμογές σας ιστού. Ακολουθώντας τις αρχές και τις τεχνικές που περιγράφονται σε αυτόν τον οδηγό, μπορείτε να δημιουργήσετε πολυγλωσσικές εφαρμογές που προσφέρουν τοπικοποιημένες εμπειρίες σε χρήστες σε όλο τον κόσμο. Θυμηθείτε να προγραμματίσετε τη στρατηγική σας i18n νωρίς, να επιλέξετε τη σωστή μέθοδο μετάφρασης για τις ανάγκες σας και να δώσετε προτεραιότητα στην εμπειρία του χρήστη. Με προσεκτικό σχεδιασμό και εκτέλεση, μπορείτε να δημιουργήσετε εφαρμογές που έχουν απήχηση σε ένα παγκόσμιο κοινό και να ξεκλειδώσετε νέες ευκαιρίες για ανάπτυξη. Η συνεχής μάθηση, η παρακολούθηση των τελευταίων εκδόσεων και οι βέλτιστες πρακτικές θα διασφαλίσουν ότι χρησιμοποιείτε τα εργαλεία και τις τεχνολογίες σας αποτελεσματικά.

Καθώς η τεχνολογία προοδεύει, αναμένεται να δούμε να εμφανίζονται πιο προηγμένες δυνατότητες i18n. Η ικανότητα προσέγγισης χρηστών από διαφορετικούς πολιτισμούς και γλωσσικές ομάδες θα παραμείνει βασική προτεραιότητα για τους προγραμματιστές εφαρμογών παγκοσμίως. Επομένως, η κατάκτηση των θεμελιωδών αρχών του i18n είναι μια πολύτιμη δεξιότητα που θα ενισχύσει την αξία σας στο σημερινό παγκόσμιο τοπίο ανάπτυξης.

Διεθνοποίηση Next.js: Δημιουργία Πολυγλωσσικών Εφαρμογών για ένα Παγκόσμιο Κοινό | MLOG