M

MLOG

Norsk

Lær hvordan du implementerer sømløs internasjonalisering (i18n) i dine Next.js-applikasjoner for å nå et globalt publikum. Dekker ruting, innholdsoversettelse og beste praksis.

Next.js Internasjonalisering: Bygg Flerspråklige Apper for et Globalt Publikum

I dagens sammenkoblede verden er det å bygge applikasjoner som henvender seg til et globalt publikum ikke lenger en luksus – det er en nødvendighet. Next.js, et kraftig React-rammeverk, gir robuste funksjoner for implementering av internasjonalisering (i18n), som lar deg lage flerspråklige applikasjoner som leverer en lokalisert opplevelse til brukere over hele verden. Denne omfattende guiden vil lede deg gjennom de essensielle konseptene, teknikkene og beste praksisene for å bygge internasjonaliserte Next.js-applikasjoner.

Forståelse av Internasjonalisering og Lokalisering

Før vi dykker ned i detaljene for Next.js i18n, la oss klargjøre nøkkelbegrepene:

I hovedsak forbereder i18n applikasjonen din for lokalisering. Ved å skille språkavhengige elementer fra kjerne-koden, gjør du det enklere å lokalisere applikasjonen for forskjellige markeder.

Hvorfor Implementere Internasjonalisering i Next.js?

Å implementere i18n i din Next.js-applikasjon gir mange fordeler:

Next.js i18n-funksjoner og Konfigurasjon

Next.js tilbyr innebygd støtte for i18n gjennom sine ruting- og innhåndteringsfunksjoner. Følgende er en oversikt over de viktigste funksjonene:

1. Konfigurere i18n i next.config.js

Kjernekonfigurasjonen for i18n ligger i filen next.config.js. Her er et eksempel:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // En liste over støttede locales (språkkoder)
    defaultLocale: 'en', // Standard locale som skal brukes
    localeDetection: true, // Aktiver/deaktiver automatisk gjenkjenning av locale basert på nettleserinnstillinger (valgfritt)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Forklaring:

2. Ruting med Locale-prefikser

Next.js legger automatisk til locale-prefikser i ruter. For eksempel, hvis du har en side på /about og locale er 'es' (spansk), vil URL-en bli /es/about. Dette muliggjør forskjellige språkversjoner av sider og lar søkemotorer indeksere innhold for hver locale. Rammeverket håndterer omdirigering og ruting for deg.

3. Bruke useRouter-hooken

useRouter-hooken fra next/router gir tilgang til gjeldende locale og annen rutinginformasjon.


import { useRouter } from 'next/router';

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

  return (
    

      
Gjeldende locale: {locale}

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

      
Standard locale: {defaultLocale}

    

  );
}

export default MyComponent;

router-objektet tilbyr følgende nøkkelegenskaper:

Strategier for Innholdsoversettelse

Når du har konfigurert din Next.js-applikasjon for i18n, må du implementere strategier for å oversette innholdet ditt. Her er flere populære tilnærminger:

1. Bruke et dedikert oversettelseshåndteringssystem (TMS)

For store prosjekter med mange språk, anbefales et TMS på det sterkeste. Populære alternativer inkluderer:

Fordeler:

2. Opprette JSON-oversettelsesfiler

For mindre prosjekter er det en enkel og effektiv metode å bruke JSON-filer til å lagre oversettelser.

Eksempel på katalogstruktur:


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

Eksempel en.json:


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

Eksempel es.json:


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

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

Denne tilnærmingen gir fleksibilitet og er enkel for mindre prosjekter. Den er generelt lett å oppdatere og vedlikeholde.

3. Bruke et oversettelsesbibliotek

Flere JavaScript-biblioteker effektiviserer innholdsoversettelse i dine React-komponenter.

Eksempel med next-i18next (Installasjon: npm install next-i18next i18next react-i18next):

Opprett en i18n-konfigurasjonsfil (f.eks. i18n.js i rotkatalogen din):


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

Opprett din Next.js-konfigurasjon for 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'],
  },
  // annen konfigurasjon
}

module.exports = nextConfig

Legg til konfigurasjonen og oversettelsesimporten i din _app.js:


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

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

export default appWithTranslation(MyApp);

Opprett en mappe og fyll den med locales for oversettelsene dine.


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

Eksempel en/common.json:


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

Bruke oversettelsen i en komponent:


import { useTranslation } from 'next-i18next';

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

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

Dette eksempelet bruker useTranslation-hooken for å hente oversettelser basert på gjeldende locale.

Håndtering av Dynamiske Ruter og Statisk Sidegenerering (SSG)

Internasjonalisering blir mer komplisert når man håndterer dynamiske ruter (f.eks. blogginnlegg, produktsider) og statisk sidegenerering (SSG).

1. Dynamiske ruter (f.eks. /blogg/[slug])

For dynamiske ruter må du generere de riktige stiene for hver locale under byggetid ved hjelp av getStaticPaths. Denne funksjonen returnerer en matrise med stier som Next.js skal forhåndsrendre.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // Hent data for blogginnlegg

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

  return {
    paths,
    fallback: false, // eller 'blocking' hvis du vil vise en lastetilstand
  };
}

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

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

Forklaring:

2. Statisk Sidegenerering (SSG) med getStaticProps

I getStaticProps kan du hente oversatt innhold basert på locale-parameteren.


export async function getStaticProps({ params, locale }) {
  // Hent innhold basert på locale og parametere
  const { post } = await getPostBySlug(params.slug, locale);

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

Funksjonen getPostBySlug bør hente det oversatte innholdet for den gitte slug-en og locale-en, som kan hentes fra dine oversettelsesfiler, database eller et CMS.

3. Server-Side Rendering (SSR) med getServerSideProps

For innhold som må hentes på forespørselstidspunktet, bruk getServerSideProps. Dette er nyttig hvis innholdet endres ofte eller er personlig tilpasset for hver bruker.


export async function getServerSideProps({ params, locale, req, res }) {
  // Hent data basert på locale og parametere (f.eks. fra en database)
  const data = await fetchData(params.slug, locale);

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

Beste Praksis for Next.js Internasjonalisering

Å følge disse beste praksisene vil hjelpe deg med å bygge robuste, vedlikeholdbare og brukervennlige flerspråklige applikasjoner:

SEO-hensyn for Internasjonaliserte Nettsteder

Å optimalisere ditt internasjonaliserte nettsted for søkemotorer er avgjørende for å drive organisk trafikk fra hele verden. Her er noen sentrale SEO-beste praksiser:

Eksempel: Bygge en Enkel Flerspråklig Blogg

La oss lage et forenklet eksempel på en flerspråklig blogg ved hjelp av Next.js. Dette vil gi en mer konkret illustrasjon av hvordan man anvender konseptene som er diskutert ovenfor.

1. Prosjektoppsett

Opprett et nytt Next.js-prosjekt:


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

2. Konfigurere i18n (next.config.js)


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

module.exports = nextConfig

3. Opprette Oversettelsesfiler

Opprett en locales-mappe i rotkatalogen og legg til følgende JSON-filer:

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. Opprette Bloggpost-komponenten (f.eks. 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. Opprette Indekssiden (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;

Dette forenklede eksempelet viser de grunnleggende prinsippene for internasjonalisering i Next.js. Du kan utvide dette grunnleggende rammeverket til å inkludere mer komplekse funksjoner, som dynamiske ruter og integrasjon med oversettelseshåndteringssystemer. Vurder å forbedre lenkene ovenfor med Link-komponenten og legge til det passende locale-attributtet.

6. Kjøre Applikasjonen

Kjør applikasjonen med:


npm run dev

Nå kan du få tilgang til bloggen din på http://localhost:3000 (engelsk), http://localhost:3000/es (spansk) og http://localhost:3000/fr (fransk). Du bør se tittelen og blogginnleggets innhold oversatt basert på valgt locale.

Konklusjon

Next.js gir et omfattende sett med funksjoner for å implementere internasjonalisering i dine webapplikasjoner. Ved å følge prinsippene og teknikkene som er beskrevet i denne guiden, kan du lage flerspråklige applikasjoner som leverer lokaliserte opplevelser til brukere over hele verden. Husk å planlegge din i18n-strategi tidlig, velge riktig oversettelsesmetode for dine behov, og prioritere brukeropplevelsen. Med nøye planlegging og gjennomføring kan du bygge applikasjoner som appellerer til et globalt publikum og åpner for nye vekstmuligheter. Kontinuerlig læring, og å holde seg oppdatert på de nyeste utgivelsene og beste praksisene, vil sikre at du utnytter verktøyene og teknologiene dine effektivt.

Etter hvert som teknologien utvikler seg, kan vi forvente å se mer avanserte i18n-funksjoner dukke opp. Evnen til å nå brukere på tvers av forskjellige kulturer og språkgrupper vil forbli en sentral prioritet for applikasjonsutviklere over hele verden. Derfor er det å mestre grunnleggende i18n en verdifull ferdighet som vil øke din verdi i dagens globale utviklingslandskap.