Nextjs+I18n Best Practices für die mehrsprachige Internationalisierung (suchmaschinenfreundlich)
Hinweis: Diese Best Practice basiert auf der Weiterleitung der nächsten Seiten. Nicht für App-Routing geeignet.
Inhaltsverzeichnis
Die Grundidee
Verwenden Sie next-i18next.
Fügen Sie das Verzeichnis [locales] zum Verzeichnis „pages“ hinzu und platzieren Sie die Hauptgeschäftslogik in diesem Verzeichnis.
Seiten wie der Index im Seitenverzeichnis werden verwendet, um die Sprache zu bestimmen und dann die entsprechende lokalisierte Seitenlogik aufzurufen.
Fügen Sie das Verzeichnis „locales“ zum öffentlichen Verzeichnis für Übersetzungsdateien hinzu.
Installieren
pnpm füge next-i18next React-i18next i18nex hinzuAufbau
Dateiverzeichnis
|components ..LangSwitcher.js ..LocLink.js ..MdRenderer.js |lib ..getStatic.js |pages ..[locales] ....index.js .._app.js .._document.js .. index.js |public ..locales ....en ...common.json ...index.md ....es ...common.json ..... .index.md |next-i18next. config.js |next.config.jsnext.config.js
const { i18n } = require('./next-i18next.config');next-i18next.config.js
module.exports = { 'development', i18n: { defaultLocale: 'en', // locales: [ 'en', 'de', 'es',"cn"], locales: [ { name: "English", Code: „en“, ISO: „en-US“, Verzeichnis: „ltr“ }, { Name: „español“, Code: „es“, ISO: „es-ES“, Verzeichnis: „ltr“ }, { name: "中文",code: "zh_cn", iso: "zh-CN", dir: "ltr" }, { name: "Deutsch",code: "de", iso: "de-DE", dir: "ltr" }, { name: "Italiano",code: "it", iso: "it-IT", dir: "ltr" }, { name: "日本语",code: "ja", iso: " ja-JP", dir: "ltr" }, { name: "한국인",code: "ko", iso: "ko-KR", dir: "ltr" }, { name: "Português",code: " pt", iso: "pt-PT", dir: "ltr" }, ], }, }Bei der Konfiguration von Gebietsschemas habe ich angesichts des Szenarios, in dem Benutzern die Sprachauswahl angezeigt wird, die meisten Konfigurationsmethoden im Internet nicht befolgt.
lib/getStatic.js
import { serverSideTranslations } from „next-i18next/serverSideTranslations“; import i18nextConfig from „@/next-i18next.config“; export const getI18nPaths = () => i18nextConfig.i18n.locales.map((lng) => ({ params : { locale: lng.code,//code hinzufügen }, })); export const getStaticPaths = () => ({ fallback: false, paths: getI18nPaths(), }); = ["common"]) => { const locale = ctx?.params?.locale ||. i18nextConfig.i18n.defaultLocale; let props = { ...(await serverSideTranslations(locale, ns)), }; }; export const makeStaticProps = (ns = []) => async (ctx) => ({ props: waiting getI18nProps(ctx, ns), });Dies ist die Logik, die verwendet wird, um die Sprachübersetzungsdatei abzurufen und sie auf der Serverseite zu übersetzen.
_app.js
import { appWithTranslation } from "next-i18next"; import Layout from '../components/layout' import { NextPage } from 'next'; ({ Component, pageProps }) => ; Standard-AppWithTranslation(MyApp) exportieren;
HINWEIS: Bei Nichtgebrauch Dieses Etikett kann direkt entfernt werden.
_document.js
import i18nextConfig from "@/next-i18next.config"; // Anderer Code import Document, { Html, Head, Main, NextScript, } from 'next/document' class MyDocument erweitert Document { render() { const currentLocale = this. props.__NEXT_DATA__.query.locale ||. i18nextConfig.i18n.defaultLocale; console.log(currentLocale) return <html lang="{currentLocale}">
<head>
<link href="/app.css" />
<link rel="shortcut icon" href="/icon.png" />
</head>
<body>
<main />
<nextscript />
</body>
</html>; } } Standard-MyDocument exportierenindex.js
import Home, { getStaticProps } from "./[locale]/index"; Ordner [locales].
Wird verwendet, um internationales Routing ähnlich wie www.xxx.com/es zu implementieren
public/locales-Ordner
Wird zum Speichern von Übersetzungsdateien verwendet.
Komponenten
Sprachauswahl: LangSwitcher.js
Code
'use client'
import React from "react";
import { useRouter } from "next/router"
import i18nextConfig from '@/next-i18next.config'
console.log(i18nextConfig.i18n.defaultLocale)
const LangSwitcher = ({ lang, ...rest}) => {
const router = useRouter();
const GetHref=(locale)=> {
console.log(locale)
let href = rest.href || router.asPath
let pName = router.pathname
Object.keys(router.query).forEach(k => {
if (k === 'locale') {
pName = pName.replace(`[${k}]`, locale)
return
}
pName = pName.replace(`[${k}]`, router.query[k])
})
if (locale == i18nextConfig.i18n.defaultLocale) {
if (pName == '/' + i18nextConfig.i18n.defaultLocale) {
href = '/'
} else {
href = `${href}`
}
} else {
if (locale) {
href = rest.href ? `/${locale}${rest.href}` : pName
}
if (href.indexOf(`/${locale}`) < 0) {
href = `/${locale}${href}`
}
}
return href
}
const LocalChanged = (value) => {
const thehref = GetHref(value)
router.push(thehref)
}
return (
<div>
🌐
<select onChange={(e) => LocalChanged(e.target.value)} defaultValue={lang} className="h-8 m-2 p-1 rounded border-current">
<option value={lang} > {GetLangData(lang).name}</option>
{i18nextConfig.i18n.locales.map(locale => {
if (locale.code === lang) return null
return (<option value={locale.code} key={locale.code}> {locale.name}</option>)
})}
</select>
</div>
)
}
//export
export function GetLangData(lang) {
var res = {}
{
i18nextConfig.i18n.locales.map(locale => {
if (locale.code === lang) {
console.log(locale)
res = locale
}
})
}
return res
}
export default LangSwitcher
Anweisungen:
Komponenten vorstellen und direkt nutzen , und der Parameter lang wird auf die aktuelle Sprache gesetzt.
LangSwitcher aus './LangSwitcher' importieren const { i18n } = useTranslation('home');
Lokalisierte Link-Komponente: LocLink.js
import React from „react“; import .rest }) => { const router = useRouter(); const locale = rest.locale ||. console.log(href) if (href.indexOf("http") === 0) skipLocaleHandling = true; if (locale && !skipLocaleHandling) { // href = href console.log(i18nextConfig.i18n.defaultLocale) console. log(locale) locale==i18nextConfig.i18n.defaultLocale ? href : router.pathname.replace("[locale]", locale } console.log(href) return (
<>
<link href="{href}" legacybehavior>
<a {...rest}>{Kinder}</a>
</Link>
</>
); }; Standard-LinkComponent exportieren;Lokalisierte Markdown-Dateierfassungs- und Rendering-Komponenten: MdRenderer.js
import ReactMarkdown from 'react-markdown' import { useState, useEffect } from "react"; import { useRouter } from "next/router" export default function MdRenderer({ path }) { const [a, setA] = useState("" ); const router = useRouter() fetch(path, { next: { revalidate: 0 } }) .then(response => Response.text()) .then(data => { setA(data) } ).catch( err=>{console.log(err)}) return ( {A && ( {A} )} ) }Anweisungen
t Funktion
- Einführung von „useTranslation“
- Definiere t
- Verwenden Sie {t('xxx')}, das war's
import { useTranslation } from "next-i18next"; const { t } = useTranslation(["common"]);//common.json ist die Übersetzungsdatei {t("xxx")}So erhalten Sie die aktuelle Sprache
import { useTranslation } from "next-i18next"; const { i18n } = useTranslation('home');
So durchlaufen Sie eine Liste von Sprachen
Rufen Sie die Sprachliste ab und passen Sie die Sprachnavigation an.
i18nextConfig aus '@/next-i18next.config' importieren {i18nextConfig.i18n.locales.map(locale => { if (locale.code === i18nextConfig.i18n.defaultLocale) return( {locale.name} ) const thehref="/"+locale.code return ( {locale.name} ) })} Übersetzung von Inhaltsabsätzen
Wenn der Inhalt vom Backend bezogen wird, ist dies nicht erforderlich.
Wenn der Inhalt jedoch im Front-End vorhanden ist, ist es sehr mühsam, ihn in JSON zu speichern. Daher kann er in Markdown gespeichert und dann die Markdown-Datei der entsprechenden Sprachversion abgerufen werden, in der der Inhalt angezeigt werden muss dann analysieren und anzeigen.
MdRenderer aus „../../components/MdRenderer“ importieren
Zusammenfassen
Durch die Mehrsprachigkeit kann eine Website mehr Traffic erzielen. Diese mehrsprachige Best Practice von nextjs berücksichtigt die Anforderungen von SEO vollständig. Suchmaschinenfreundlich.
Geeignet für Tool-Stationen, Keyword-Stationen, News- und Content-Stationen.
