Log in

Nextjs+next-intl best practice voor meertalige internationalisering (APP-router)

Auteur:neo yang Tijd:2024/02/19 Lezen: 12448
Nextjs biedt twee routers: APP en Page, waarbij Page wordt uitgefaseerd. De auteur gebruikte eerder de internationalisering van de Page-router, maar heeft sindsdien internationalisering geïmplementeerd op basis van de APP-router. Ze evalueerden verschillende oplossingen en ontdekten dat next-intl de eenvoudigste en meest succesvolle is Het bericht schetst de directorystructuur, routing, middleware-instellingen, hoe vertaalbestanden moeten worden geladen en hoe vertalingen moeten worden geïmplementeerd, waarbij wordt benadrukt dat, ongeacht de gekozen internationaliseringsoplossing, routing, bestandsstructuur en vertalingsimplementatie belangrijke aspecten zijn.

Nextjs heeft twee routers: APP-router en Page-router.

Enige tijd geleden werd nextjs onder de Page-router geïnternationaliseerd en samengevat:

Maar de Page-router zal de router zijn die geleidelijk door Nextjs wordt uitgefaseerd. Daarom is Nextjs onlangs geïnternationaliseerd op basis van een APP-router.

1. Selectie van de internationale oplossingen van Nextjs

1. i18next + reageren-i18next + i18next-bronnen-naar-backend + volgende-i18n-router

Het lijkt erop dat de meeste mensen dit gebruiken. Ik heb het geprobeerd en het was behoorlijk ingewikkeld, maar het lukte nog niet, dus ik gaf het op.

2. volgende-i18n-router reageren-intl

Het zag er best ingewikkeld uit, maar vanwege de schaduw van 1 gaf ik het op.

3. volgende-intl

next-intl is een complete internationaliseringsoplossing voor nextjs en vereist geen andere softwarepakketten. En de configuratie is relatief eenvoudig. Belangrijker nog: ik heb het met succes geconfigureerd en ben geen onverklaarbare problemen tegengekomen.

Dus dit is het.

2. Directorystructuur

|app ..[locale] ...layout.js ...page.js |components ..LangSwitcher.js |public ..locales ...en ....common.json ...es .... common.json |i18n.js |navigatie.js |middleware.js |next.config.js

3. Internationale routering

1. navigatie.js

Dit is een configuratiebestand en de items die in dit bestand zijn geconfigureerd, worden in sommige andere bestanden aangeroepen.

import { createSharedPathnamesNavigation } van 'next-intl/navigation'; export const locales = ['en', 'de', 'es', 'ja','ko','it','pt']; = 'as-needed'; export const defaultLocale= "nl"; export const localeItems= [ { naam: "Engels", code: "en", iso: "en-US", map: "ltr" }, { naam : "español",code: "es", iso: "es-ES", map: "ltr" }, { naam: "中文",code: "zh_cn", iso: "zh-CN", map: " ltr" }, { naam: "Deutsch",code: "de", iso: "de-DE", dir: "ltr" }, { naam: "Italiano",code: "it", iso: "it- IT", map: "ltr" }, { naam: "日本语",code: "ja", iso: "ja-JP", map: "ltr" }, { naam: "한국인",code: "ko ", iso: "ko-KR", map: "ltr" }, { naam: "Português",code: "pt", iso: "pt-PT", map: "ltr" }, ] export const { Link , redirect, usePathname, useRouter } = createSharedPathnamesNavigation({ locales, localePrefix });

2. [landelijke] map

Alle paginabestanden in de app-map worden in de map [locale] geplaatst.

3. Middleware: middleware.js

illustreren:

Implementeer de volgende URL-stijl

Standaardtaal-URL:

De startpagina is: www.xxx.com

De binnenpagina is: www.xxx.com/about

URL's in andere talen: (Neem Spaans als voorbeeld)

De startpagina is: www.xxx.com/es

De binnenpagina is: www.xxx.com/es/about

Als bovendien de standaardtaal in de URL wordt ingevoerd (de standaardtaal is bijvoorbeeld Engels), voert de gebruiker de URL in: www.xxx.com/en

Vervolgens gaat het automatisch naar www.xxx.com

Code:

import createMiddleware van "next-intl/middleware"; import { defaultLocale, localePrefix, locales } van '@/navigation'; export standaard createMiddleware({ locales, localePrefix, defaultLocale, localeDetection: false, }); / Sla alle paden over die niet geïnternationaliseerd mogen worden // Hiermee worden de mappen "api", "_next" en alle bestanden overgeslagen // met een extensie (bijv. favicon.ico) matcher: ["/((?!api|_next| .*\\..*).*)"], };

4. Laad vertaalbestanden

1. Vertaal bestanden

illustreren

Mijn vertaalbestanden worden in de "publieke" map geplaatst, maar in feite kunnen de vertaalbestanden ook in andere mappen worden geplaatst, zolang het overeenkomstige pad is geconfigureerd in het i18n.js-bestand.

Het vertaalbestand is een json-bestand en het json-bestand kan een geneste indeling hebben of niet. Er zal uiteindelijk iets anders naar de twee worden verwezen.

Code (niet genest)

{ "aaa": "hallo", }

Code (genest)

{ "bbb":{ "aaa": hallo", } }

2. i18n.js-bestand

illustreren:

Dit bestand wordt gebruikt om vertaalbestanden te importeren. De sleutel is om het pad van het vertaalbestand te configureren, dat consistent moet zijn met het pad waar uw vertaalbestand zich bevindt.

${locale} in het pad geeft de taal aan.

code

import { getRequestConfig } from "next-intl/server" // Maak deze configuratie één keer per verzoek en // maak deze beschikbaar voor alle servercomponenten. export standaard getRequestConfig(async ({ locale }) => ({ // Load translations voor de actieve landinstellingsberichten: (wacht op import(`./public/locales/${locale}/common.json`)).default, }));

3. Configuratie van next.config.js

/** @type {import('next').NextConfig} */ const nextConfig = {} const withNextIntl = require("next-intl/plugin")("./i18n.js"); =withNextIntl (nextConfig)

5. Implementeer vertaling

Code in layout.js:

import "./globals.css"; importeer { NextIntlClientProvider, useMessages } van 'next-intl'; importeer { locales } van '@/navigation'; importeer header van '@/components/Header' importeer voettekst van '@/components /Footer' export standaardfunctie RootLayout({ kinderen, params: { locale } }) { if (!locales.includes(locale)) { notFound( } const messages = useMessages();
    <html lang="{locale}">
      <nextintlclientprovider locale="{locale}" messages="{messages}">
      <body><header />{kinderen}<footer /></body>
      </nextintlclientprovider>
    </html>
  );
}

Code in pagina.js:

De parameter locale vertegenwoordigt de huidige taal.

Als het vertaalbestand niet genest is, dan const t = useTranslations();

Als het vertaalbestand genest is, gebruik dan zoiets als: const t = useTranslations("bbb");

import { useTranslations } uit &#039;next-intl&#039;; import { Link } uit &#039;@/navigation&#039;; export standaardfunctie Home({ params: { locale } }) { const t = useTranslations();<>   
<link href="{"/"}"><h1>{t(&quot;aaa&quot;)}</h1></Link>
</>)

6. Taalwisselaar

1. Effect

Trek omlaag om een taal te selecteren en de huidige pagina schakelt over naar de pagina in de geselecteerde taal.

2. Coderen

"use client";
import { useLocale } from "next-intl";
import { localeItems, useRouter, usePathname, defaultLocale } from '@/navigation';
export default function LangSwitcher() {
  const locale = useLocale();
  const router = useRouter();
  const pathname = usePathname();
  console.log(locale)

  const handleChange = (e) => {
    router.push(pathname, { locale: e.target.value });
  };
 
  return (
    <div>
      <select
      value={locale}
        onChange={handleChange}
        className="h-8 m-2 p-1 rounded border-current"
      >
        <option value={locale} > {GetLangData(locale).name}</option>

        {localeItems.map((item) => {

          if (item.code === locale) return null
          return (<option key={item.code} value={item.code}>
            {item.name}
          </option>)
        })}
      </select>
    </div>
  );
}
export function GetLangData(defaultLocale) {
  var res = {}
  {
    localeItems.map(locale => {
      if (locale.code === defaultLocale) {
        console.log(locale)
        res = locale
      }
    })
  }
  return res

}

7. SEO- en zoekmachinevriendelijk

1. Metagegevens

Nextjs APP-router genereert de titel en metagegevens van de pagina. Ik heb drie methoden geprobeerd:

De eerste manier: gebruik het rechtstreeks in layout.js: expert const metadata={}

De tweede manier: gebruik dynamisch gegenereerde metadata in page.js

Als referentie:Optimaliseren: Metagegevens |.js (nextjs.org)

Op deze twee manieren faalde ik voor meertalige titels en metadata. Ten slotte werd de derde methode gebruikt, die tevens de eenvoudigste en meest duidelijke methode is.

De derde manier: schrijf de title-tag en de meta-tag rechtstreeks in page.js.

Daarom is de code van page.js als volgt gewijzigd:

import { useTranslations } uit &#039;next-intl&#039;; import { Link } uit &#039;@/navigation&#039;; export standaardfunctie Home({ params: { locale } }) { const t = useTranslations();<>  
          <title>{t(&quot;sitenaam&quot;)}</title>
        <meta name="keyword" content="{t("site-name")}"></meta>
        <meta name="description" content="{t(&quot;sitebeschrijving&quot;)}"></meta>
        <meta property="og:type" content="website"></meta>
        <meta property="og:title" content="{t(&quot;sitenaam&quot;)}"></meta>
        <meta property="og:description" content="{t(&quot;sitebeschrijving&quot;)}"></meta>
        <meta property="og:site_name" content="{t(&quot;sitenaam&quot;)}"></meta>
        <meta property="og:image" content="/images/xxx.png"></meta>
        <meta property="og:image:width" content="512"></meta>
        <meta property="og:image:height" content="512"></meta>
        <meta property="og:image:alt" content=""></meta>
 
<link href="{"/"}"><h1>{t(&quot;aaa&quot;)}</h1></Link>
</>)

2. Meertalige navigatie: Maak het gemakkelijker voor zoekmachines om meertalige URL's te ontdekken

illustreren

De taalwisselaar wordt aan de voorkant gerenderd, dus heb ik aan de achterkant een meertalige navigatie aan de achterkant toegevoegd, de component Footer.js. Als u op de betreffende taal klikt, wordt u naar de startpagina van de website in deze taal geleid.

Footer.js-code is als volgt:

import Link from 'next/link'
import { localeItems,defaultLocale } from '@/navigation';


export default function Footer(){


  return (<>
    <div className="divider"></div>
    <footer className="footer footer-center p-10 bg-base-200 text-base-content rounded">
      <nav className="flex flex-wrap gap-4">

     {localeItems.map(locale => {
          if (locale.code === defaultLocale) return(<Link className="link link-hover" href="/"  key={locale.code}>{locale.name}</Link>)
          const thehref="/"+locale.code
          return (<Link className="link link-hover" href={thehref} key={locale.code}> {locale.name}</Link>)
        })} 
  </nav> 
      <aside className='p-6 text-center'>
        <p>Copyright © 2024 - All right reserved by xxx.com</p>
      </aside>
     
    </footer>
  </>
    
  )
}

8. Samenvatting

Internationale routing, structuur en introductie van vertaalbestanden, en implementatie van vertalingen. Welk internationaliseringsplan het ook is, deze drie aspecten zullen een rol spelen. Hoewel het niet lastig is, is next-intl over het algemeen relatief eenvoudig.

9. Referentie

Een diepe duik in Next.js app-routerlokalisatie met next-intl

Een complete handleiding voor het instellen van next-intl met de App Router



copyright © www.lyustu.com alle rechten voorbehouden.
Thema: TheMoon V3.0. Auteur: neo yang