Лучшие практики многоязычной интернационализации Nextjs+I18n (удобство для поисковых систем)
Примечание. Эта передовая практика основана на маршрутизации следующих страниц. Не подходит для маршрутизации приложений. Основная идея каталога — использовать next-i18ne […]
Примечание. Эта передовая практика основана на маршрутизации следующих страниц. Не подходит для маршрутизации приложений.
Оглавление
Основная идея
Используйте next-i18next.
Добавьте каталог [locales] в каталог «pages» и поместите в него основную бизнес-логику.
Страницы, такие как индекс в каталоге страниц, используются для определения языка, а затем вызывают соответствующую логику локализованной страницы.
Добавьте каталог локалей в общий каталог для файлов перевода.
Установить
pnpm добавить следующий-i18next реакция-i18next i18nexКонфигурация
Каталог файлов
|компоненты ..LangSwitcher.js ..LocLink.js ..MdRenderer.js |lib ..getStatic.js |страницы ..[локали] ....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.jsследующий.config.js
const { i18n } = require('./next-i18next.config'); const nextConfig = { i18n }следующий-i18next.config.js
Module.exports = { 'development', i18n: { defaultLocale: 'en', // локали: [ 'en', 'de', 'es', "cn"], локали: [ { name: "English", код: "en", iso: "en-US", dir: "ltr" }, { name: "español",code: "es", iso: "es-ES", dir: "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" }, ], }, }Для настройки локалей, учитывая сценарий отображения выбора языка пользователям, я не следовал большинству методов настройки в Интернете.
библиотека/getStatic.js
импортировать { serverSideTranslations } из "next-i18next/serverSideTranslations"; импортировать i18nextConfig из "@/next-i18next.config"; экспортировать const getI18nPaths = () => i18nextConfig.i18n.locales.map((lng) => ({ params : { locale: lng.code,//добавить код }, })); экспортировать const getStaticPaths = () => ({ резервный вариант: false, paths: getI18nPaths(), }); экспортировать 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: await getI18nProps(ctx, ns), });Это логика, используемая для получения файла языкового перевода и его перевода на стороне сервера.
_app.js
import { appWithTranslation } from "next-i18next"; импортировать макет из '../comComponents/layout' import { NextPage } from 'next'; const MyApp = ({ Component, pageProps }) => ; экспортировать приложение по умолчанию с переводом (MyApp);
ПРИМЕЧАНИЕ. Если вы не используете Эту метку можно удалить напрямую.
_document.js
import i18nextConfig from "@/next-i18next.config"; // Другой код import Document, { Html, Head, Main, NextScript, } из класса 'next/document' MyDocument расширяет документ { 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>; } } экспортировать MyDocument по умолчаниюindex.js
импортировать домашнюю страницу, { getStaticProps } из "./[locale]/index"; экспортировать домашнюю страницу по умолчанию; экспортировать { getStaticProps }; папка [локали]
Используется для реализации международной маршрутизации, аналогичной www.xxx.com/es.
папка public/locales
Используется для хранения файлов перевода.
компоненты
Выбор языка: LangSwitcher.js
код
'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
Инструкции:
Внедряйте компоненты и используйте их напрямую , а параметр lang устанавливает текущий язык.
импортировать LangSwitcher из './LangSwitcher' const { i18n } = useTranslation('home');
Компонент локализованной ссылки: LocLink.js
импортировать React из "react"; импортировать ссылку из "next/link"; импортировать { useRouter } из "next/router"; импортировать i18nextConfig из '@/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}>{дети}</a>
</Link>
</>
); }; экспортировать LinkComponent по умолчанию;Локализованные компоненты получения и рендеринга файлов Markdown: MdRenderer.js
импортировать ReactMarkdown из 'react-markdown' импортировать { useState, useEffect } из "реагировать"; импортировать { useRouter } из "next/router" экспортировать функцию по умолчанию 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 ( {а && ( {а} )} ) }инструкции
т-функция
- Представляем «useTranslation»
- определить т
- Используйте {t('xxx')}, вот и все.
import { useTranslation } from "next-i18next"; const { t } = useTranslation(["common"]);//common.json — файл перевода {t("xxx")}Как получить текущий язык
import { useTranslation } from "next-i18next"; const { i18n } = useTranslation('home'); console.log(i18n.language)
Как просмотреть список языков
Получите список языков и настройте языковую навигацию.
импортировать i18nextConfig из '@/next-i18next.config' {i18nextConfig.i18n.locales.map(locale => { if (locale.code === i18nextConfig.i18n.defaultLocale) return( {локаль.имя} ) const thehref="/"+locale.code return ( {локаль.имя} ) })} Перевод абзацев контента
Если контент получен из бэкенда, то это не нужно.
Однако, если контент существует во внешнем интерфейсе, хранить его в формате json очень затруднительно, поэтому его можно сохранить в уценке, а затем получить файл уценки соответствующей языковой версии, где контент необходимо отобразить, и затем проанализируйте и отобразите его.
импортировать MdRenderer из «../../comComponents/MdRenderer»
Подведем итог
Многоязычность позволяет веб-сайту получать больше трафика. Эта лучшая многоязычная практика nextjs полностью учитывает потребности SEO. Удобен для поисковых систем.
Подходит для станций с инструментами, станций с ключевыми словами, станций новостей и контента.
