M

MLOG

Suomi

Opi toteuttamaan saumaton kansainvälistäminen (i18n) Next.js-sovelluksissasi tavoittaaksesi globaalin yleisön. Käsittelee reititystä, sisällön kääntämistä ja parhaita käytäntöjä.

Next.js-kansainvälistäminen: Monikielisten sovellusten rakentaminen globaalille yleisölle

Nykypäivän verkostoituneessa maailmassa globaalille yleisölle suunnattujen sovellusten rakentaminen ei ole enää ylellisyyttä – se on välttämättömyys. Next.js, tehokas React-kehys, tarjoaa vankat ominaisuudet kansainvälistämisen (i18n) toteuttamiseen, mikä mahdollistaa monikielisten sovellusten luomisen, jotka tarjoavat paikallistetun kokemuksen käyttäjille maailmanlaajuisesti. Tämä kattava opas johdattaa sinut läpi kansainvälistettyjen Next.js-sovellusten rakentamisen keskeiset käsitteet, tekniikat ja parhaat käytännöt.

Kansainvälistämisen ja lokalisaation ymmärtäminen

Ennen kuin syvennymme Next.js:n i18n-ominaisuuksien yksityiskohtiin, selvitetään keskeiset termit:

Pohjimmiltaan i18n valmistelee sovelluksesi lokalisointia varten. Erottamalla kieliriippuvaiset elementit ydinkoodista teet sovelluksen lokalisoimisesta eri markkinoille helpompaa.

Miksi toteuttaa kansainvälistäminen Next.js:ssä?

i18n:n toteuttaminen Next.js-sovelluksessasi tarjoaa lukuisia etuja:

Next.js:n i18n-ominaisuudet ja konfiguraatio

Next.js tarjoaa sisäänrakennetun tuen i18n:lle reititys- ja sisällönhallintaominaisuuksiensa kautta. Seuraavassa on erittely tärkeistä ominaisuuksista:

1. i18n:n konfigurointi next.config.js-tiedostossa

i18n:n ydinkonfiguraatio sijaitsee next.config.js-tiedostossa. Tässä on esimerkki:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // Tuettujen kieliversioiden (kielikoodien) taulukko
    defaultLocale: 'en', // Oletuskieliversio
    localeDetection: true, // Salli/estä automaattinen kieliversion tunnistus selaimen asetusten perusteella (valinnainen)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Selitys:

2. Reititys kieliversion etuliitteillä

Next.js lisää automaattisesti reitteihin kieliversion etuliitteen. Esimerkiksi, jos sinulla on sivu osoitteessa /about ja kieliversio on 'es' (espanja), URL-osoitteeksi tulee /es/about. Tämä mahdollistaa sivujen eri kieliversiot ja antaa hakukoneille mahdollisuuden indeksoida sisältöä kullekin kieliversiolle. Kehys hoitaa uudelleenohjauksen ja reitityksen puolestasi.

3. useRouter-koukun hyödyntäminen

useRouter-koukku next/router-paketista antaa pääsyn nykyiseen kieliversioon ja muihin reititystietoihin.


import { useRouter } from 'next/router';

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

  return (
    

      
Nykyinen kieliversio: {locale}

      
Saatavilla olevat kieliversiot: {locales.join(', ')}

      
Oletuskieliversio: {defaultLocale}

    

  );
}

export default MyComponent;

router-objekti tarjoaa seuraavat keskeiset ominaisuudet:

Sisällön kääntämisen strategiat

Kun olet konfiguroinut Next.js-sovelluksesi i18n:ää varten, sinun on toteutettava strategioita sisältösi kääntämiseksi. Tässä on useita suosittuja lähestymistapoja:

1. Erillisen käännöstenhallintajärjestelmän (TMS) käyttö

Suurissa projekteissa, joissa on monia kieliä, TMS on erittäin suositeltava. Suosittuja vaihtoehtoja ovat:

Edut:

2. JSON-käännöstiedostojen luominen

Pienemmissä projekteissa JSON-tiedostojen käyttö käännösten tallentamiseen on yksinkertainen ja tehokas menetelmä.

Esimerkki hakemistorakenteesta:


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

Esimerkki en.json:


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

Esimerkki es.json:


{
  "greeting": "¡Hola, mundo!",
  "welcomeMessage": "Bienvenido a nuestro sitio web."
}

Esimerkki MyComponent.js:


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

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

  return (
    

      
{t.greeting}

      
{t.welcomeMessage}

    

  );
}

export default MyComponent;

Tämä lähestymistapa tarjoaa joustavuutta ja on suoraviivainen pienempiin projekteihin. Sitä on yleensä helppo päivittää ja ylläpitää.

3. Käännöskirjaston käyttö

Useat JavaScript-kirjastot tehostavat sisällön kääntämistä React-komponenteissasi.

Esimerkki next-i18next-kirjastolla (Asennus: npm install next-i18next i18next react-i18next):

Luo i18n-konfiguraatiotiedosto (esim. i18n.js juurihakemistoosi):


// 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 }

Luo Next.js-konfiguraatio next-i18nextille.


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

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

module.exports = nextConfig

Lisää konfiguraatio ja käännöksen tuonti _app.js-tiedostoosi:


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

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

export default appWithTranslation(MyApp);

Luo kansio ja täytä se käännöstesi kieliversioilla.


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

Esimerkki en/common.json:


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

Käännöksen käyttäminen komponentissa:


import { useTranslation } from 'next-i18next';

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

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

Tämä esimerkki käyttää useTranslation-koukkua noutamaan käännöksiä nykyisen kieliversion perusteella.

Dynaamisten reittien ja staattisen sivuston generoinnin (SSG) käsittely

Kansainvälistäminen muuttuu monimutkaisemmaksi, kun käsitellään dynaamisia reittejä (esim. blogikirjoitukset, tuotesivut) ja staattista sivuston generointia (SSG).

1. Dynaamiset reitit (esim. /blog/[slug])

Dynaamisille reiteille sinun on generoitava oikeat polut jokaiselle kieliversiolle koontivaiheessa käyttämällä getStaticPaths-funktiota. Tämä funktio palauttaa taulukon poluista, jotka Next.js:n tulisi esirenderöidä.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // Hae blogikirjoitusten tiedot

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

  return {
    paths,
    fallback: false, // tai 'blocking', jos haluat näyttää lataustilan
  };
}

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

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

Selitys:

2. Staattinen sivuston generointi (SSG) getStaticProps-funktiolla

getStaticProps-funktiossa voit hakea käännettyä sisältöä locale-parametrin perusteella.


export async function getStaticProps({ params, locale }) {
  // Hae sisältöä kieliversion ja parametrien perusteella
  const { post } = await getPostBySlug(params.slug, locale);

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

getPostBySlug-funktion tulisi hakea annetun slugin ja kieliversion käännetty sisältö, joka voidaan noutaa käännöstiedostoistasi, tietokannasta tai CMS:stä.

3. Palvelinpuolen renderöinti (SSR) getServerSideProps-funktiolla

Sisällölle, joka on haettava pyynnön hetkellä, käytä getServerSideProps-funktiota. Tämä on hyödyllistä, jos sisältö muuttuu usein tai on henkilökohtaista kullekin käyttäjälle.


export async function getServerSideProps({ params, locale, req, res }) {
  // Hae dataa kieliversion ja parametrien perusteella (esim. tietokannasta)
  const data = await fetchData(params.slug, locale);

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

Parhaat käytännöt Next.js-kansainvälistämiseen

Näiden parhaiden käytäntöjen noudattaminen auttaa sinua rakentamaan vakaita, ylläpidettäviä ja käyttäjäystävällisiä monikielisiä sovelluksia:

SEO-näkökohdat kansainvälistetyille verkkosivustoille

Kansainvälistetyn verkkosivustosi optimointi hakukoneita varten on välttämätöntä orgaanisen liikenteen ohjaamiseksi ympäri maailmaa. Tässä on joitakin keskeisiä SEO-parhaita käytäntöjä:

Esimerkki: Yksinkertaisen monikielisen blogin rakentaminen

Luodaan yksinkertaistettu esimerkki monikielisestä blogista käyttäen Next.js:ää. Tämä antaa konkreettisemman kuvan siitä, miten yllä käsiteltyjä käsitteitä sovelletaan.

1. Projektin perustaminen

Luo uusi Next.js-projekti:


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

2. Konfiguroi i18n (next.config.js)


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

module.exports = nextConfig

3. Luo käännöstiedostot

Luo locales-kansio juurihakemistoon ja lisää seuraavat JSON-tiedostot:

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/fr.json:


{
  "title": "Bienvenue sur Mon Blog",
  "postTitle": "Mon Premier Article",
  "postContent": "Ceci est le contenu de mon premier article de blog."
}

4. Luo blogikirjoituskomponentti (esim. components/BlogPost.js)


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

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

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

  return (
    

      
{translations.postTitle}

      
{translations.postContent}

    

  );
}

export default BlogPost;

5. Luo etusivu (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 fr from '../locales/fr.json';

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

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

  return (
    

      
{translations.title}

      
      

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

    

  );
}

export default HomePage;

Tämä yksinkertaistettu esimerkki esittelee Next.js-kansainvälistämisen perusperiaatteet. Voit laajentaa tätä peruskehystä sisältämään monimutkaisempia ominaisuuksia, kuten dynaamisia reittejä ja integraatiota käännöstenhallintajärjestelmiin. Harkitse yllä olevien linkkien parantamista Link-komponentilla ja lisäämällä asianmukainen locale-attribuutti.

6. Suorita sovellus

Suorita sovellus komennolla:


npm run dev

Nyt voit käyttää blogiasi osoitteissa http://localhost:3000 (englanti), http://localhost:3000/es (espanja) ja http://localhost:3000/fr (ranska). Sinun pitäisi nähdä otsikko ja blogikirjoituksen sisältö käännettynä valitun kieliversion mukaan.

Johtopäätös

Next.js tarjoaa kattavan joukon ominaisuuksia kansainvälistämisen toteuttamiseen verkkosovelluksissasi. Noudattamalla tässä oppaassa esitettyjä periaatteita ja tekniikoita voit luoda monikielisiä sovelluksia, jotka tarjoavat paikallistettuja kokemuksia käyttäjille ympäri maailmaa. Muista suunnitella i18n-strategiasi ajoissa, valita tarpeisiisi sopiva käännösmenetelmä ja priorisoida käyttäjäkokemus. Huolellisella suunnittelulla ja toteutuksella voit rakentaa sovelluksia, jotka resonoivat globaalin yleisön kanssa ja avaavat uusia kasvumahdollisuuksia. Jatkuva oppiminen, uusimpien julkaisujen ja parhaiden käytäntöjen seuraaminen varmistaa, että hyödynnät työkaluja ja teknologioita tehokkaasti.

Teknologian edetessä on odotettavissa yhä kehittyneempiä i18n-ominaisuuksia. Kyky tavoittaa käyttäjiä eri kulttuureista ja kieliryhmistä säilyy keskeisenä prioriteettina sovelluskehittäjille maailmanlaajuisesti. Siksi i18n:n perusteiden hallitseminen on arvokas taito, joka lisää arvoasi nykypäivän globaalissa kehitysmaailmassa.