M

MLOG

Nederlands

Leer hoe u naadloze internationalisatie (i18n) implementeert in uw Next.js-applicaties om een wereldwijd publiek te bereiken. Behandelt routing, vertaling van content en best practices.

Next.js Internationalisatie: Meertalige Apps Bouwen voor een Wereldwijd Publiek

In de huidige verbonden wereld is het bouwen van applicaties voor een wereldwijd publiek geen luxe meer, maar een noodzaak. Next.js, een krachtig React-framework, biedt robuuste functies voor het implementeren van internationalisatie (i18n), waarmee u meertalige applicaties kunt creëren die een gelokaliseerde ervaring bieden aan gebruikers over de hele wereld. Deze uitgebreide gids leidt u door de essentiële concepten, technieken en best practices voor het bouwen van geïnternationaliseerde Next.js-applicaties.

Internationalisatie en Lokalisatie Begrijpen

Voordat we dieper ingaan op de details van Next.js i18n, lichten we de belangrijkste termen toe:

In wezen bereidt i18n uw applicatie voor op lokalisatie. Door taalafhankelijke elementen te scheiden van de kerncode, maakt u het gemakkelijker om de applicatie te lokaliseren voor verschillende markten.

Waarom Internationalisatie Implementeren in Next.js?

Het implementeren van i18n in uw Next.js-applicatie biedt tal van voordelen:

Next.js i18n-Functies en Configuratie

Next.js biedt ingebouwde ondersteuning voor i18n via zijn routing- en contentbeheerfuncties. Hieronder volgt een overzicht van de belangrijke functies:

1. i18n Configureren in next.config.js

De kernconfiguratie voor i18n bevindt zich in het next.config.js-bestand. Hier is een voorbeeld:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // Een array met ondersteunde locales (taalcodes)
    defaultLocale: 'en', // De standaard locale om te gebruiken
    localeDetection: true, // Automatische locale-detectie op basis van browserinstellingen in- of uitschakelen (optioneel)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Uitleg:

2. Routing met Locale-Prefixen

Next.js voegt automatisch een prefix toe aan routes met de locale. Als u bijvoorbeeld een pagina heeft op /about en de locale is 'es' (Spaans), wordt de URL /es/about. Dit maakt verschillende taalversies van pagina's mogelijk en stelt zoekmachines in staat om content voor elke locale te indexeren. Het framework regelt de omleiding en de routing voor u.

3. De useRouter Hook Gebruiken

De useRouter hook van next/router biedt toegang tot de huidige locale en andere routeringsinformatie.


import { useRouter } from 'next/router';

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

  return (
    

      
Huidige locale: {locale}

      
Beschikbare locales: {locales.join(', ')}

      
Standaard locale: {defaultLocale}

    

  );
}

export default MyComponent;

Het router-object biedt de volgende belangrijke eigenschappen:

Strategieën voor Contentvertaling

Nadat u uw Next.js-applicatie heeft geconfigureerd voor i18n, moet u strategieën implementeren voor het vertalen van uw content. Hier zijn verschillende populaire benaderingen:

1. Een Toegewijd Translation Management System (TMS) Gebruiken

Voor grootschalige projecten met veel talen wordt een TMS sterk aanbevolen. Populaire opties zijn onder meer:

Voordelen:

2. JSON-vertaalbestanden Maken

Voor kleinere projecten is het gebruik van JSON-bestanden om vertalingen op te slaan een eenvoudige en effectieve methode.

Voorbeeld Mappenstructuur:


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

Voorbeeld en.json:


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

Voorbeeld es.json:


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

Voorbeeld 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;

Deze aanpak biedt flexibiliteit en is eenvoudig voor kleinere projecten. Het is over het algemeen gemakkelijk bij te werken en te onderhouden.

3. Een Vertaalbibliotheek Gebruiken

Verschillende JavaScript-bibliotheken stroomlijnen de vertaling van content binnen uw React-componenten.

Voorbeeld met next-i18next (Installatie: npm install next-i18next i18next react-i18next):

Maak een i18n-configuratiebestand (bijv. i18n.js in uw root-directory):


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

Maak uw Next.js-configuratie voor 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', 'fr'],
  },
  // andere configuratie
}

module.exports = nextConfig

Voeg de configuratie en de vertalingsimport toe aan uw _app.js:


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

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

export default appWithTranslation(MyApp);

Maak een map en vul deze met de locales voor uw vertalingen.


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

Voorbeeld en/common.json:


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

De vertaling gebruiken in een component:


import { useTranslation } from 'next-i18next';

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

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

Dit voorbeeld gebruikt de useTranslation-hook om vertalingen op te halen op basis van de huidige locale.

Omgaan met Dynamische Routes en Static Site Generation (SSG)

Internationalisatie wordt complexer bij het omgaan met dynamische routes (bijv. blogposts, productpagina's) en static site generation (SSG).

1. Dynamische Routes (bijv. /blog/[slug])

Voor dynamische routes moet u de juiste paden voor elke locale genereren tijdens de build-tijd met behulp van getStaticPaths. Deze functie retourneert een array van paden die Next.js vooraf moet renderen.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // Haal blogpostgegevens op

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

  return {
    paths,
    fallback: false, // of 'blocking' als u een laadstatus wilt tonen
  };
}

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

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

Uitleg:

2. Static Site Generation (SSG) met getStaticProps

In getStaticProps kunt u vertaalde content ophalen op basis van de locale-parameter.


export async function getStaticProps({ params, locale }) {
  // Haal content op basis van de locale en params
  const { post } = await getPostBySlug(params.slug, locale);

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

De functie getPostBySlug moet de vertaalde content voor de opgegeven slug en locale ophalen, die kan worden verkregen uit uw vertaalbestanden, database of een CMS.

3. Server-Side Rendering (SSR) met getServerSideProps

Voor content die op het moment van het verzoek moet worden opgehaald, gebruikt u getServerSideProps. Dit is handig als de content vaak verandert of gepersonaliseerd is voor elke gebruiker.


export async function getServerSideProps({ params, locale, req, res }) {
  // Haal gegevens op basis van de locale en params (bijv. uit een database)
  const data = await fetchData(params.slug, locale);

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

Best Practices voor Next.js Internationalisatie

Het volgen van deze best practices helpt u bij het bouwen van robuuste, onderhoudbare en gebruiksvriendelijke meertalige applicaties:

SEO-overwegingen voor Geïnternationaliseerde Websites

Het optimaliseren van uw geïnternationaliseerde website voor zoekmachines is essentieel om organisch verkeer van over de hele wereld aan te trekken. Hier zijn enkele belangrijke SEO best practices:

Voorbeeld: Een Eenvoudige Meertalige Blog Bouwen

Laten we een vereenvoudigd voorbeeld maken van een meertalige blog met Next.js. Dit geeft een concretere illustratie van hoe de hierboven besproken concepten kunnen worden toegepast.

1. Project Opzetten

Maak een nieuw Next.js-project:


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

2. i18n Configureren (next.config.js)


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

module.exports = nextConfig

3. Vertaalbestanden Maken

Maak een locales-map in de root-directory en voeg de volgende JSON-bestanden toe:

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. De Blog Post Component Maken (bijv. 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. De Indexpagina Maken (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;

Dit vereenvoudigde voorbeeld toont de fundamentele principes van Next.js internationalisatie. U kunt dit basisraamwerk uitbreiden met complexere functies, zoals dynamische routes en integratie met vertaalbeheersystemen. Overweeg de bovenstaande links te verbeteren met de Link-component en het juiste locale-attribuut toe te voegen.

6. De Applicatie Starten

Start de applicatie met:


npm run dev

Nu kunt u uw blog bezoeken op http://localhost:3000 (Engels), http://localhost:3000/es (Spaans) en http://localhost:3000/fr (Frans). U zou de titel en de inhoud van de blogpost vertaald moeten zien op basis van de geselecteerde locale.

Conclusie

Next.js biedt een uitgebreide set functies voor het implementeren van internationalisatie in uw webapplicaties. Door de principes en technieken in deze gids te volgen, kunt u meertalige applicaties creëren die gelokaliseerde ervaringen bieden aan gebruikers over de hele wereld. Vergeet niet uw i18n-strategie vroegtijdig te plannen, de juiste vertaalmethode voor uw behoeften te kiezen en prioriteit te geven aan de gebruikerservaring. Met zorgvuldige planning en uitvoering kunt u applicaties bouwen die aanslaan bij een wereldwijd publiek en nieuwe groeimogelijkheden ontsluiten. Continu leren, op de hoogte blijven van de nieuwste releases en best practices zorgt ervoor dat u uw tools en technologieën effectief gebruikt.

Naarmate de technologie vordert, kunt u meer geavanceerde i18n-functies verwachten. De mogelijkheid om gebruikers in verschillende culturen en taalgroepen te bereiken, blijft een belangrijke prioriteit voor applicatieontwikkelaars wereldwijd. Daarom is het beheersen van de basisprincipes van i18n een waardevolle vaardigheid die uw waarde in het huidige wereldwijde ontwikkelingslandschap zal vergroten.