M

MLOG

Dansk

Lær, hvordan du implementerer problemfri internationalisering (i18n) i dine Next.js-applikationer for at nå ud til et globalt publikum. Dækker routing, indholdsoversættelse og bedste praksis.

Next.js Internationalisering: Opbygning af flersprogede apps til et globalt publikum

I nutidens forbundne verden er det ikke længere en luksus at bygge applikationer, der henvender sig til et globalt publikum – det er en nødvendighed. Next.js, et kraftfuldt React-framework, tilbyder robuste funktioner til implementering af internationalisering (i18n), hvilket giver dig mulighed for at skabe flersprogede applikationer, der leverer en lokaliseret oplevelse til brugere verden over. Denne omfattende guide vil føre dig gennem de væsentlige koncepter, teknikker og bedste praksis for at bygge internationaliserede Next.js-applikationer.

Forståelse af Internationalisering og Lokalisering

Før vi dykker ned i detaljerne om Next.js i18n, lad os afklare de centrale begreber:

I bund og grund forbereder i18n din applikation til lokalisering. Ved at adskille sprogafhængige elementer fra kernekoden gør du det lettere at lokalisere applikationen til forskellige markeder.

Hvorfor implementere internationalisering i Next.js?

Implementering af i18n i din Next.js-applikation giver talrige fordele:

Next.js i18n-funktioner og konfiguration

Next.js tilbyder indbygget understøttelse for i18n gennem sine routing- og indholdsstyringsfunktioner. Følgende er en oversigt over de vigtige funktioner:

1. Konfiguration af i18n i next.config.js

Kernekonfigurationen for i18n findes i filen next.config.js. Her er et eksempel:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // En række med understøttede locales (sprogkoder)
    defaultLocale: 'en', // Den standard-locale, der skal bruges
    localeDetection: true, // Aktivér/deaktivér automatisk registrering af locale baseret på browserindstillinger (valgfrit)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Forklaring:

2. Routing med Locale-præfikser

Next.js tilføjer automatisk 'locale' som præfiks til ruter. Hvis du for eksempel har en side på /about, og din 'locale' er 'es' (spansk), bliver URL'en /es/about. Dette muliggør forskellige sprogversioner af sider og lader søgemaskiner indeksere indhold for hver 'locale'. Frameworket håndterer omdirigering og routing for dig.

3. Anvendelse af useRouter Hook

Hook'en useRouter fra next/router giver adgang til den aktuelle 'locale' og anden routing-information.


import { useRouter } from 'next/router';

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

  return (
    

      
Nuværende locale: {locale}

      
Tilgængelige locales: {locales.join(', ')}

      
Standard locale: {defaultLocale}

    

  );
}

export default MyComponent;

router-objektet tilbyder følgende centrale egenskaber:

Strategier for indholdsoversættelse

Når du har konfigureret din Next.js-applikation til i18n, skal du implementere strategier for at oversætte dit indhold. Her er flere populære tilgange:

1. Brug af et dedikeret oversættelsesstyringssystem (TMS)

Til store projekter med mange sprog anbefales et TMS stærkt. Populære muligheder inkluderer:

Fordele:

2. Oprettelse af JSON-oversættelsesfiler

Til mindre projekter er brugen af JSON-filer til at gemme oversættelser en simpel og effektiv metode.

Eksempel på mappestruktur:


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

Eksempel da.json:


{
  "greeting": "Hej, verden!",
  "welcomeMessage": "Velkommen til vores hjemmeside."
}

Eksempel en.json:


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

Eksempel MyComponent.js:


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

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

  return (
    

      
{t.greeting}

      
{t.welcomeMessage}

    

  );
}

export default MyComponent;

Denne tilgang giver fleksibilitet og er ligetil for mindre projekter. Det er generelt let at opdatere og vedligeholde.

3. Brug af et oversættelsesbibliotek

Flere JavaScript-biblioteker strømliner indholdsoversættelse i dine React-komponenter.

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

Opret en i18n-konfigurationsfil (f.eks. i18n.js i din rodmappe):


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

Opret din Next.js-konfiguration for next-i18next.


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

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

module.exports = nextConfig

Tilføj konfigurationen og oversættelsesimporten til din _app.js:


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

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

export default appWithTranslation(MyApp);

Opret en mappe og fyld den med 'locales' til dine oversættelser.


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

Eksempel da/common.json:


{
  "greeting": "Hej, verden!",
  "welcomeMessage": "Velkommen til vores hjemmeside."
}

Brug af oversættelsen i en komponent:


import { useTranslation } from 'next-i18next';

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

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

Dette eksempel bruger useTranslation-hook'en til at hente oversættelser baseret på den aktuelle 'locale'.

Håndtering af dynamiske ruter og Static Site Generation (SSG)

Internationalisering bliver mere kompleks, når man arbejder med dynamiske ruter (f.eks. blogindlæg, produktsider) og static site generation (SSG).

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

For dynamiske ruter skal du generere de korrekte stier for hver 'locale' på byggetidspunktet ved hjælp af getStaticPaths. Denne funktion returnerer en række stier, som Next.js skal præ-rendere.


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

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

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

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

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

Forklaring:

2. Static Site Generation (SSG) med getStaticProps

I getStaticProps kan du hente oversat indhold baseret på locale-parameteren.


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

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

Funktionen getPostBySlug bør hente det oversatte indhold for den givne 'slug' og 'locale', som kunne hentes fra dine oversættelsesfiler, en database eller et CMS.

3. Server-Side Rendering (SSR) med getServerSideProps

For indhold, der skal hentes på anmodningstidspunktet, skal du bruge getServerSideProps. Dette er nyttigt, hvis indholdet ændres ofte eller er personligt tilpasset for hver bruger.


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

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

Bedste praksis for Next.js Internationalisering

Ved at følge disse bedste praksisser kan du bygge robuste, vedligeholdelsesvenlige og brugervenlige flersprogede applikationer:

SEO-overvejelser for internationaliserede websites

Optimering af dit internationaliserede website til søgemaskiner er afgørende for at drive organisk trafik fra hele verden. Her er nogle centrale SEO-bedste praksisser:

Eksempel: Opbygning af en simpel flersproget blog

Lad os skabe et forenklet eksempel på en flersproget blog ved hjælp af Next.js. Dette vil give en mere konkret illustration af, hvordan man anvender de koncepter, der er diskuteret ovenfor.

1. Projektopsætning

Opret et nyt Next.js-projekt:


npx create-next-app min-flersprogede-blog
cd min-flersprogede-blog

2. Konfigurer i18n (next.config.js)


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

module.exports = nextConfig

3. Opret oversættelsesfiler

Opret en locales-mappe i rodmappen og tilføj følgende JSON-filer:

locales/da.json:


{
  "title": "Velkommen til Min Blog",
  "postTitle": "Mit Første Indlæg",
  "postContent": "Dette er indholdet af mit første blogindlæg."
}

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 primera publicación de blog."
}

4. Opret blogindlægskomponenten (f.eks. components/BlogPost.js)


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

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

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

  return (
    

      
{translations.postTitle}

      
{translations.postContent}

    

  );
}

export default BlogPost;

5. Opret forsiden (pages/index.js)


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

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

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

  return (
    

      
{translations.title}

      
      

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

    

  );
}

export default HomePage;

Dette forenklede eksempel viser de grundlæggende principper for Next.js-internationalisering. Du kan udvide denne grundlæggende ramme til at inkludere mere komplekse funktioner, såsom dynamiske ruter og integration med oversættelsesstyringssystemer. Overvej at forbedre linkene ovenfor med Link-komponenten og tilføje det relevante locale-attribut.

6. Kør applikationen

Kør applikationen med:


npm run dev

Nu kan du tilgå din blog på http://localhost:3000 (dansk), http://localhost:3000/en (engelsk) og http://localhost:3000/es (spansk). Du bør se titlen og blogindlæggets indhold oversat baseret på den valgte 'locale'.

Konklusion

Next.js tilbyder et omfattende sæt funktioner til implementering af internationalisering i dine webapplikationer. Ved at følge principperne og teknikkerne beskrevet i denne guide kan du skabe flersprogede applikationer, der leverer lokaliserede oplevelser til brugere over hele kloden. Husk at planlægge din i18n-strategi tidligt, vælge den rigtige oversættelsesmetode til dine behov og prioritere brugeroplevelsen. Med omhyggelig planlægning og udførelse kan du bygge applikationer, der appellerer til et globalt publikum og åbner op for nye vækstmuligheder. Kontinuerlig læring, at holde sig ajour med de seneste udgivelser og bedste praksis vil sikre, at du udnytter dine værktøjer og teknologier effektivt.

Efterhånden som teknologien udvikler sig, kan du forvente at se mere avancerede i18n-funktioner dukke op. Evnen til at nå brugere på tværs af forskellige kulturer og sproggrupper vil forblive en central prioritet for applikationsudviklere verden over. Derfor er det at mestre det grundlæggende i i18n en værdifuld færdighed, der vil øge din værdi i nutidens globale udviklingslandskab.