Nextjs+next-intl best practice voor meertalige internationalisering (APP-router)
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.js3. 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 'next-intl'; import { Link } uit '@/navigation'; export standaardfunctie Home({ params: { locale } }) { const t = useTranslations();<>
<link href="{"/"}"><h1>{t("aaa")}</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 'next-intl'; import { Link } uit '@/navigation'; export standaardfunctie Home({ params: { locale } }) { const t = useTranslations();<>
<title>{t("sitenaam")}</title>
<meta name="keyword" content="{t("site-name")}"></meta>
<meta name="description" content="{t("sitebeschrijving")}"></meta>
<meta property="og:type" content="website"></meta>
<meta property="og:title" content="{t("sitenaam")}"></meta>
<meta property="og:description" content="{t("sitebeschrijving")}"></meta>
<meta property="og:site_name" content="{t("sitenaam")}"></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("aaa")}</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
