Mejores prácticas de internacionalización multilingüe de Nextjs+I18n (compatible con motores de búsqueda)
Nota: Esta mejor práctica se basa en el enrutamiento de las páginas siguientes. No apto para enrutamiento de aplicaciones.
Tabla de contenido
la idea basica
Utilice next-i18next.
Agregue el directorio [locales] al directorio "pages" y coloque la lógica empresarial principal en este directorio.
Páginas como el índice en el directorio de páginas se utilizan para determinar el idioma y luego llamar a la lógica de página localizada correspondiente.
Agregue el directorio local al directorio público para archivos de traducción.
Instalar
pnpm agregar siguiente-i18siguiente reaccionar-i18siguiente i18nexConfiguración
Directorio de archivos
|componentes ..LangSwitcher.js ..LocLink.js ..MdRenderer.js |lib ..getStatic.js |páginas ..[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 |siguiente.config.jssiguiente.config.js
const {i18n} = require('./next-i18next.config'); const nextConfig = {i18n}siguiente-i18next.config.js
module.exports = { 'desarrollo', i18n: { defaultLocale: 'en', // locales: [ 'en', 'de', 'es',"cn"], locales: [ { nombre: "English", código: "en", iso: "en-US", dir: "ltr" }, { nombre: "español", código: "es", iso: "es-ES", dir: "ltr" }, { nombre: "中文", código: "zh_cn", iso: "zh-CN", dir: "ltr" }, { nombre: "Deutsch", código: "de", iso: "de-DE", dir: "ltr" }, { nombre: "Italiano", código: "it", iso: "it-IT", dir: "ltr" }, { nombre: "日本语", código: "ja", iso: " ja-JP", dir: "ltr" }, { nombre: "한국인", código: "ko", iso: "ko-KR", dir: "ltr" }, { nombre: "Português", código: " pt", iso: "pt-PT", dir: "ltr" }, ], }, }Para la configuración de configuraciones regionales, considerando el escenario de mostrar la selección de idioma a los usuarios, no seguí la mayoría de los métodos de configuración en Internet.
lib/getStatic.js
importar { serverSideTranslations } desde "next-i18next/serverSideTranslations"; importar i18nextConfig desde "@/next-i18next.config"; exportar const getI18nPaths = () => i18nextConfig.i18n.locales.map((lng) => ({ params : { locale: lng.code,//agregar código }, })); exportar const getStaticPaths = () => ({ fallback: false, rutas: getI18nPaths(), }); exportar const getI18nProps = async (ctx, ns = ["común"]) => { const locale = ctx?.params?.locale || i18nextConfig.i18n.defaultLocale; let props = { ...(await serverSideTranslations(locale, ns)), }; return props; }; exportar const makeStaticProps = (ns = []) => async (ctx) => ({ props: await getI18nProps(ctx, ns), });Esta es la lógica utilizada para obtener el archivo de traducción del idioma y traducirlo en el lado del servidor.
_app.js
importar { appWithTranslation } desde "next-i18next"; importar diseño desde '../components/layout' importar {NextPage} desde 'siguiente'; const MyApp = ({ Component, pageProps }) => ; exportar appWithTranslation(MyApp) predeterminada;
NOTA: Si no usa Esta etiqueta se puede quitar directamente.
_documento.js
import i18nextConfig from "@/next-i18next.config"; // Otro código import Document, { Html, Head, Main, NextScript, } de la clase 'next/document' MyDocument extends Document { render() { const currentLocale = this. props.__NEXT_DATA__.query.locale || i18nextConfig.i18n.defaultLocale; console.log(currentLocale) retorno <html lang="{currentLocale}">
<head>
<link href="/app.css" />
<link rel="shortcut icon" href="/icon.png" />
</head>
<body>
<main />
<nextscript />
</body>
</html>; } } exportar MiDocumento predeterminadoindex.js
importar Inicio, {getStaticProps} de "./[locale]/index"; exportar inicio predeterminado; exportar {getStaticProps}; carpeta [locales]
Se utiliza para implementar enrutamiento internacional similar a www.xxx.com/es
carpeta pública/locales
Se utiliza para almacenar archivos de traducción.
componentes
Selector de idioma: LangSwitcher.js
código
'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
Instrucciones:
Introducir componentes y utilizarlos directamente. y el parámetro lang se establece en el idioma actual.
importar LangSwitcher desde './LangSwitcher' const { i18n } = useTranslation('home');
Componente de enlace localizado: LocLink.js
importar React desde "react"; importar enlace desde "siguiente/enlace"; importar { useRouter } desde "siguiente/router"; importar i18nextConfig desde '@/next-i18next.config' const LinkComponent = ({ niños, 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) consola. log(locale) locale==i18nextConfig.i18n.defaultLocale ? href : router.pathname.replace("[locale]", locale); } console.log(href) return (
<>
<link href="{href}" legacybehavior>
<a {...rest}>{niños}</a>
</Link>
</>
); }; exportar LinkComponent predeterminado;Componentes localizados de adquisición y representación de archivos Markdown: MdRenderer.js
importar ReactMarkdown desde 'react-markdown' importar { useState, useEffect } de "react"; importar { useRouter } de "siguiente/enrutador" exportar la función predeterminada MdRenderer({ ruta }) { const [a, setA] = useState("" ); const router = useRouter() fetch(ruta, {siguiente: { revalidar: 0 } }) .then(respuesta => respuesta.text()) .then(data => { setA(data) } ).catch( err=>{console.log(err)}) retorno ( {a && ( {a} )} ) }Instrucciones
función t
- Presentamos "useTranslation"
- definir t
- Usa {t('xxx')}, eso es todo
import { useTranslation } de "next-i18next"; const { t } = useTranslation(["common"]);//common.json es el archivo de traducción {t("xxx")}Cómo obtener el idioma actual
importar {useTranslation} de "next-i18next"; const {i18n} = useTranslation('home'); console.log(i18n.language)
Cómo recorrer una lista de idiomas
Obtenga la lista de idiomas y personalice la navegación por idiomas.
importar i18nextConfig desde '@/next-i18next.config' {i18nextConfig.i18n.locales.map(locale => { if (locale.code === i18nextConfig.i18n.defaultLocale) return( {nombre.locale} ) const thehref="/"+locale.code retorno ( {nombre.locale} ) })} Traducción de párrafos de contenido.
Si el contenido se obtiene del backend, entonces no es necesario.
Sin embargo, si el contenido existe en el front-end, es muy problemático almacenarlo en json, por lo que se puede almacenar en markdown y luego obtener el archivo de markdown de la versión de idioma correspondiente donde se debe mostrar el contenido, y luego analícelo y muéstrelo.
importar MdRenderer desde '../../components/MdRenderer'
Resumir
El multilenguaje permite que un sitio web obtenga más tráfico. Esta mejor práctica multilingüe de nextjs considera plenamente las necesidades de SEO. Compatible con motores de búsqueda.
Adecuado para estaciones de herramientas, estaciones de palabras clave, estaciones de noticias y contenido.
