M

MLOG

Svenska

Lär dig hur du implementerar sömlös internationalisering (i18n) i dina Next.js-applikationer för att nå en global publik. Omfattar routing, innehållsöversättning och bästa praxis.

Next.js Internationalisering: Bygga flerspråkiga appar för en global publik

I dagens uppkopplade värld är det inte längre en lyx att bygga applikationer som riktar sig till en global publik – det är en nödvändighet. Next.js, ett kraftfullt React-ramverk, erbjuder robusta funktioner för att implementera internationalisering (i18n), vilket gör att du kan skapa flerspråkiga applikationer som levererar en lokaliserad upplevelse till användare världen över. Denna omfattande guide går igenom de väsentliga koncepten, teknikerna och bästa praxis för att bygga internationaliserade Next.js-applikationer.

Förståelse för Internationalisering och Lokalisering

Innan vi dyker in i detaljerna för Next.js i18n, låt oss klargöra nyckelbegreppen:

I grund och botten förbereder i18n din applikation för lokalisering. Genom att separera språkberoende element från kärnkoden gör du det enklare att lokalisera applikationen för olika marknader.

Varför implementera internationalisering i Next.js?

Att implementera i18n i din Next.js-applikation erbjuder många fördelar:

Next.js i18n-funktioner och konfiguration

Next.js erbjuder inbyggt stöd för i18n genom sina routing- och innehållshanteringsfunktioner. Följande är en genomgång av de viktiga funktionerna:

1. Konfigurera i18n i next.config.js

Kärnkonfigurationen för i18n finns i filen next.config.js. Här är ett exempel:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // En array med stödda locales (språkkoder)
    defaultLocale: 'en', // Standard-locale att använda
    localeDetection: true, // Aktivera/inaktivera automatisk locale-detektering baserat på webbläsarinställningar (valfritt)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Förklaring:

2. Routing med Locale-prefix

Next.js lägger automatiskt till ett prefix för routes med den aktuella locale. Om du till exempel har en sida på /about och din locale är 'es' (spanska), blir URL:en /es/about. Detta möjliggör olika språkversioner av sidor och gör att sökmotorer kan indexera innehåll för varje locale. Ramverket hanterar omdirigering och routing åt dig.

3. Använda useRouter-hooken

useRouter-hooken från next/router ger tillgång till den aktuella locale och annan routinginformation.


import { useRouter } from 'next/router';

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

  return (
    

      
Current locale: {locale}

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

      
Default locale: {defaultLocale}

    

  );
}

export default MyComponent;

router-objektet erbjuder följande nyckelegenskaper:

Strategier för innehållsöversättning

När du har konfigurerat din Next.js-applikation för i18n måste du implementera strategier för att översätta ditt innehåll. Här är flera populära tillvägagångssätt:

1. Använda ett dedikerat översättningshanteringssystem (TMS)

För storskaliga projekt med många språk rekommenderas ett TMS starkt. Populära alternativ inkluderar:

Fördelar:

2. Skapa JSON-översättningsfiler

För mindre projekt är det en enkel och effektiv metod att använda JSON-filer för att lagra översättningar.

Exempel på katalogstruktur:


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

Exempel en.json:


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

Exempel es.json:


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

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

Detta tillvägagångssätt ger flexibilitet och är enkelt för mindre projekt. Det är i allmänhet lätt att uppdatera och underhålla.

3. Använda ett översättningsbibliotek

Flera JavaScript-bibliotek effektiviserar innehållsöversättning inom dina React-komponenter.

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

Skapa en i18n-konfigurationsfil (t.ex. i18n.js i din rotkatalog):


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

Skapa din Next.js-konfiguration för 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'],
  },
  // annan konfiguration
}

module.exports = nextConfig

Lägg till konfigurationen och översättningsimporten i din _app.js:


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

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

export default appWithTranslation(MyApp);

Skapa en mapp och fyll den med locales för dina översättningar.


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

Exempel en/common.json:


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

Använda översättningen i en komponent:


import { useTranslation } from 'next-i18next';

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

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

Detta exempel använder useTranslation-hooken för att hämta översättningar baserat på den aktuella locale.

Hantera dynamiska routes och Static Site Generation (SSG)

Internationalisering blir mer komplex när man hanterar dynamiska routes (t.ex. blogginlägg, produktsidor) och static site generation (SSG).

1. Dynamiska routes (t.ex. /blog/[slug])

För dynamiska routes måste du generera de korrekta sökvägarna för varje locale vid byggtid med hjälp av getStaticPaths. Denna funktion returnerar en array av sökvägar som Next.js ska för-rendera.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // Hämta data för blogginlägg

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

  return {
    paths,
    fallback: false, // eller 'blocking' om du vill visa ett laddningstillstånd
  };
}

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

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

Förklaring:

2. Static Site Generation (SSG) med getStaticProps

I getStaticProps kan du hämta översatt innehåll baserat på locale-parametern.


export async function getStaticProps({ params, locale }) {
  // Hämta innehåll baserat på locale och params
  const { post } = await getPostBySlug(params.slug, locale);

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

Funktionen getPostBySlug bör hämta det översatta innehållet för den givna sluggen och locale, vilket kan hämtas från dina översättningsfiler, databas eller ett CMS.

3. Server-Side Rendering (SSR) med getServerSideProps

För innehåll som behöver hämtas vid förfrågningstillfället, använd getServerSideProps. Detta är användbart om innehållet ändras ofta eller är personanpassat för varje användare.


export async function getServerSideProps({ params, locale, req, res }) {
  // Hämta data baserat på locale och params (t.ex. från en databas)
  const data = await fetchData(params.slug, locale);

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

Bästa praxis för Next.js-internationalisering

Att följa dessa bästa praxis hjälper dig att bygga robusta, underhållbara och användarvänliga flerspråkiga applikationer:

SEO-överväganden för internationaliserade webbplatser

Att optimera din internationaliserade webbplats för sökmotorer är avgörande för att driva organisk trafik från hela världen. Här är några viktiga SEO-metoder:

Exempel: Bygga en enkel flerspråkig blogg

Låt oss skapa ett förenklat exempel på en flerspråkig blogg med Next.js. Detta ger en mer konkret illustration av hur man tillämpar de koncept som diskuterats ovan.

1. Projektinställning

Skapa ett nytt Next.js-projekt:


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

2. Konfigurera i18n (next.config.js)


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

module.exports = nextConfig

3. Skapa översättningsfiler

Skapa en locales-mapp i rotkatalogen och lägg till följande 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. Skapa blogginläggskomponenten (t.ex. 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. Skapa startsidan (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;

Detta förenklade exempel visar de grundläggande principerna för Next.js-internationalisering. Du kan bygga vidare på detta grundläggande ramverk för att inkludera mer komplexa funktioner, såsom dynamiska routes och integration med översättningshanteringssystem. Överväg att förbättra länkarna ovan med Link-komponenten och lägg till det lämpliga locale-attributet.

6. Kör applikationen

Kör applikationen med:


npm run dev

Nu kan du komma åt din blogg på http://localhost:3000 (engelska), http://localhost:3000/es (spanska) och http://localhost:3000/fr (franska). Du bör se titeln och blogginläggets innehåll översatt baserat på den valda locale.

Slutsats

Next.js tillhandahåller en omfattande uppsättning funktioner för att implementera internationalisering i dina webbapplikationer. Genom att följa principerna och teknikerna som beskrivs i denna guide kan du skapa flerspråkiga applikationer som levererar lokaliserade upplevelser till användare över hela världen. Kom ihåg att planera din i18n-strategi tidigt, välja rätt översättningsmetod för dina behov och prioritera användarupplevelsen. Med noggrann planering och genomförande kan du bygga applikationer som tilltalar en global publik och öppnar nya möjligheter för tillväxt. Kontinuerligt lärande och att hålla sig uppdaterad med de senaste versionerna och bästa praxis kommer att säkerställa att du använder dina verktyg och tekniker effektivt.

I takt med att tekniken utvecklas kan vi förvänta oss att se mer avancerade i18n-funktioner dyka upp. Förmågan att nå användare över olika kulturer och språkgrupper kommer att förbli en nyckelprioritet för applikationsutvecklare världen över. Därför är att bemästra grunderna i i18n en värdefull färdighet som kommer att öka ditt värde i dagens globala utvecklingslandskap.