Bonnes pratiques d'internationalisation multilingue Nextjs+I18n (compatible avec les moteurs de recherche)
Remarque : Cette bonne pratique est basée sur le routage des pages suivantes. Ne convient pas au routage d'applications.
Table des matières
L'idée de base
Utilisez next-i18next.
Ajoutez le répertoire [locales] au répertoire "pages" et placez la logique métier principale dans ce répertoire.
Les pages telles que l'index dans le répertoire des pages sont utilisées pour déterminer la langue, puis appellent la logique de page localisée correspondante.
Ajoutez le répertoire locales au répertoire public pour les fichiers de traduction.
Installer
pnpm ajouter next-i18next réagir-i18next i18nexConfiguration
Répertoire de fichiers
|composants ..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 | suivant.config.jssuivant.config.js
const { i18n } = require('./next-i18next.config'); const nextConfig = { i18n }suivant-i18next.config.js
module.exports = { 'development', i18n : { defaultLocale : 'en', // locales : [ 'en', 'de', 'es',"cn"], locales : [ { nom : "English", code : "en", iso : "en-US", dir : "ltr" }, { nom : "español", code : "es", iso : "es-ES", dir : "ltr" }, { nom : "中文", code : "zh_cn", iso : "zh-CN", dir : "ltr" }, { nom : "Deutsch", code : "de", iso : "de-DE", dir : "ltr" }, { nom : "Italiano", code : "it", iso : "it-IT", dir : "ltr" }, { nom : "日本语", code : "ja", iso : " ja-JP", dir: "ltr" }, { nom: "한국인", code: "ko", iso: "ko-KR", dir: "ltr" }, { nom: "Português", code: " pt", iso : "pt-PT", dir : "ltr" }, ], }, }Pour la configuration des paramètres régionaux, compte tenu du scénario d'affichage de la sélection de langue aux utilisateurs, je n'ai pas suivi la plupart des méthodes de configuration sur Internet.
lib/getStatic.js
importer { serverSideTranslations } depuis "next-i18next/serverSideTranslations" ; importer i18nextConfig depuis "@/next-i18next.config" ; exporter const getI18nPaths = () => i18nextConfig.i18n.locales.map((lng) => ({ params : { locale : lng.code,//ajouter du code }, })); export const getStaticPaths = () => ({ repli : false, chemins : getI18nPaths(), }); export const getI18nProps = async (ctx, ns = ["common"]) => { const locale = ctx?.params?.locale || i18nextConfig.i18n.defaultLocale; let props = { ...(await serverSideTranslations(locale, ns)), }; return props; };export const makeStaticProps = (ns = []) => async (ctx) => ({ props : wait getI18nProps(ctx, ns), });C'est la logique utilisée pour obtenir le fichier de traduction de langue et le traduire côté serveur.
_app.js
importer { appWithTranslation } depuis "next-i18next" ; importer la mise en page depuis '../components/layout' importer { NextPage } depuis 'next' ; const MyApp = ({ Component, pageProps }) => ; exporter appWithTranslation par défaut (MyApp);
REMARQUE : Si vous n'utilisez pas Cette étiquette peut être supprimée directement.
_document.js
importer i18nextConfig depuis "@/next-i18next.config" ; // Autre code importer un document, { Html, Head, Main, NextScript, } depuis la classe 'next/document' MyDocument extends Document { render() { const currentLocale = this. props.__NEXT_DATA__.query.locale || i18nextConfig.i18n.defaultLocale ; console.log(currentLocale) renvoie <html lang="{currentLocale}">
<head>
<link href="/app.css" />
<link rel="shortcut icon" href="/icon.png" />
</head>
<body>
<main />
<nextscript />
</body>
</html>; } } exporter MyDocument par défautindex.js
importer la maison, { getStaticProps } depuis "./[locale]/index" ; exporter la maison par défaut ; exporter { getStaticProps } ; dossier [locales]
Utilisé pour mettre en œuvre un routage international similaire à www.xxx.com/es
dossier public/locales
Utilisé pour stocker les fichiers de traduction.
Composants
Sélecteur de langue : 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
Instructions:
Introduire les composants et les utiliser directement , et le paramètre lang est défini sur la langue actuelle.
importer LangSwitcher depuis './LangSwitcher' const { i18n } = useTranslation('home');
Composant Lien localisé : LocLink.js
importer React depuis "react"; importer un lien depuis "next/link"; importer { useRouter } depuis "next/router"; importer i18nextConfig depuis '@/next-i18next.config' const LinkComponent = ({ children, skipLocaleHandling, .. .rest }) => { const router = useRouter(); const locale = rest.locale || router.query.locale || ""; console.log(router) let href = rest.href || router.asPath; 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}>{enfants}</a>
</Link>
</>
); } ; exporter le LinkComponent par défaut ;Composants d'acquisition et de rendu de fichiers Markdown localisés : MdRenderer.js
importer ReactMarkdown depuis 'react-markdown' importer { useState, useEffect } depuis "react"; importer { useRouter } depuis "next/router" exporter la fonction par défaut MdRenderer({ chemin }) { const [a, setA] = useState("" ); const router = useRouter() fetch(path, { next: { revalidate: 0 } }) .then(response => réponse.text()) .then(data => { setA(data) } ).catch( err=>{console.log(err)}) retour ( {un && ( {un} )} ) }Instructions
fonction
- Présentation de "useTranslation"
- définir t
- Utilisez {t('xxx')}, c'est tout
import { useTranslation } from "next-i18next" ; const { t } = useTranslation(["common"]);//common.json est le fichier de traduction {t("xxx")}Comment obtenir la langue actuelle
importer { useTranslation } depuis "next-i18next" ; const { i18n } = useTranslation('home'); console.log(i18n.langue)
Comment parcourir une liste de langues
Obtenez la liste des langues et personnalisez la navigation linguistique.
importer i18nextConfig depuis '@/next-i18next.config' {i18nextConfig.i18n.locales.map(locale => { if (locale.code === i18nextConfig.i18n.defaultLocale) return( {locale.nom} ) const thehref="/"+locale.code retour ( {locale.nom} ) })} Traduction des paragraphes de contenu
Si le contenu est obtenu à partir du backend, cela n'est pas nécessaire.
Cependant, si le contenu existe sur le front-end, il est très difficile de le stocker en json. Par conséquent, il peut être stocké en markdown, puis obtenir le fichier markdown de la version linguistique correspondante dans laquelle le contenu doit être affiché, et puis analysez-le et affichez-le.
importer MdRenderer depuis '../../components/MdRenderer'
Résumer
Le multilingue permet à un site Web d’obtenir plus de trafic. Cette bonne pratique multilingue nextjs prend pleinement en compte les besoins du référencement. Adapté aux moteurs de recherche.
Convient aux stations d'outils, aux stations de mots clés, aux stations d'actualités et de contenu.
