Рекомендации по многоязычной интернационализации Nextjs+next-intl (маршрутизатор приложений)
Nextjs имеет два маршрутизатора: маршрутизатор APP и маршрутизатор страницы.
Некоторое время назад под маршрутизатором Page nextjs был интернационализирован и обобщен:
Но маршрутизатор Page будет постепенно выведен из эксплуатации Nextjs. Поэтому недавно Nextjs был интернационализирован на основе маршрутизатора APP.
1. Выбор решения для интернационализации Nextjs
1. i18next + реакция-i18next + i18next-resources-to-backend + next-i18n-router
Кажется, что большинство людей используют это. Я попробовал, и это было довольно сложно. У меня пока не получилось, поэтому я сдался.
2. реакция следующего-i18n-router-intl
Это выглядело довольно сложно, но из-за тени 1 я сдался.
3. следующий-между
next-intl — это полное решение для интернационализации nextjs, не требующее других пакетов программного обеспечения. И конфигурация относительно проста. Что еще более важно, я успешно настроил его и не столкнулся с необъяснимыми проблемами.
Итак, вот оно.
2. Структура каталогов
|app ..[локаль] ...layout.js ...page.js |компоненты ..LangSwitcher.js |public ..locales ...en ....common.json ...es .... common.json |i18n.js |navigation.js |middleware.js |next.config.js3. Международная маршрутизация
1. навигация.js
Это файл конфигурации, и элементы, настроенные в этом файле, будут вызываться в некоторых других файлах.
импортировать { createSharedPathnamesNavigation } из 'next-intl/navigation'; экспортировать const locales = ['en', 'de', 'es', 'ja','ko','it','pt']; экспортировать const localePrefix = 'по мере необходимости'; экспортировать const defaultLocale="en"; экспортировать const localeItems= [ { name: "English",code: "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" }, ]export const { Ссылка , перенаправление, usePathname, useRouter } = createSharedPathnamesNavigation({ locales, localePrefix });2. каталог [локаль]
Все файлы страниц в каталоге приложения размещаются в каталоге [locale].
3. Промежуточное ПО: middleware.js.
проиллюстрировать:
Реализуйте следующий стиль URL-адреса
URL-адрес языка по умолчанию:
Домашняя страница: www.xxx.com.
Внутренняя страница: www.xxx.com/about.
URL-адреса на других языках: (возьмем испанский в качестве примера)
Домашняя страница: www.xxx.com/es.
Внутренняя страница: www.xxx.com/es/about.
Кроме того, если в URL-адресе указан язык по умолчанию, например, языком по умолчанию является английский, пользователь вводит URL-адрес: www.xxx.com/en.
Затем он автоматически перейдет на www.xxx.com.
Код:
импортировать createMiddleware из "next-intl/middleware"; импортировать { defaultLocale, localePrefix, locales } из '@/navigation'; экспортировать default createMiddleware({ locales, localePrefix , defaultLocale, localeDetection: false, }); экспортировать const config = { / / Пропустить все пути, которые не должны быть интернационализированы. // При этом пропускаются папки «api», «_next» и все файлы // с расширением (например, favicon.ico) сопоставление: ["/((?!api|_next| .*\\..*).*)"], };4. Загрузите файлы перевода
1. Перевести файлы
иллюстрировать
Мои файлы перевода размещаются в «общедоступном» каталоге, но на самом деле файлы перевода также могут быть размещены в других каталогах, если соответствующий путь настроен в файле i18n.js.
Файл перевода представляет собой файл json, и файл json может быть во вложенном формате или нет. В конечном итоге на эти два понятия будут ссылаться несколько по-разному.
Код (не вложенный)
{ "ааа": "привет", }Код (вложенный)
{ "bbb":{ "ааа":"привет", } }2. файл i18n.js
проиллюстрировать:
Этот файл используется для импорта файлов перевода. Ключевым моментом является настройка пути к файлу перевода, который должен совпадать с путем, по которому находится ваш файл перевода.
${локаль} в пути указывает язык.
код
import { getRequestConfig } from "next-intl/server"; // Создаем эту конфигурацию один раз для каждого запроса и // делаем ее доступной всем компонентам сервера. для активной локали. messages: (await import(`./public/locales/${locale}/common.json`)).default, }));3. Настройка next.config.js
/** @type {import('next').NextConfig} */ const nextConfig = {} const withNextIntl = require("next-intl/plugin")("./i18n.js"); Module.exports =withNextIntl (следующая конфигурация)5. Реализуйте перевод
Код в макете.js:
импортировать «./globals.css»; импортировать { NextIntlClientProvider, useMessages } из «next-intl»; импортировать { локали } из «@/navigation»; импортировать заголовок из «@/comComponents/Header» импортировать нижний колонтитул из «@/comComponents» /Footer' экспортирует функцию по умолчанию RootLayout({ Children, params: { locale } }) { if (!locales.includes(locale)) { notFound(); } const messages = useMessages(); return (
<html lang="{locale}">
<nextintlclientprovider locale="{locale}" messages="{messages}">
<body><header />{дети}<footer /></body>
</nextintlclientprovider>
</html>
);
}
Код в page.js:
Параметр locale представляет текущий язык.
Если файл перевода не вложен, то const t = useTranslations();
Если файл перевода вложенный, используйте что-то вроде: const t = useTranslations("bbb"); в зависимости от структуры файла и реальных потребностей.
import { useTranslations } from 'next-intl'; import { Link } from '@/navigation'; экспортировать функцию по умолчанию Home({ params: { locale } }) { const t = useTranslations(); return (<>
<link href="{"/"}"><h1>{т("ааа")}</h1></Link>
</>)6. Переключатель языка
1. Эффект
Потяните вниз, чтобы выбрать язык, и текущая страница переключится на страницу на выбранном языке.
2. Код
"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 и поисковая оптимизация
1. Метаданные
Маршрутизатор приложений Nextjs генерирует заголовок и метаданные страницы. Я попробовал три метода:
Первый способ: использовать его непосредственно в Layout.js: expert const метаданные={}
Второй способ: использовать динамически генерируемые метаданные в page.js.
Для справки:Оптимизация: метаданные | Next.js (nextjs.org)
Этими двумя способами мне не удалось создать многоязычный заголовок и метаданные. Наконец, был использован третий метод, который также является самым простым и понятным.
Третий способ: написать тег title и мета-тег прямо в page.js.
Поэтому код page.js был изменен на следующий:
import { useTranslations } from 'next-intl'; import { Link } from '@/navigation'; экспортировать функцию по умолчанию Home({ params: { locale } }) { const t = useTranslations(); return (<>
<title>{t("имя-сайта")}</title>
<meta name="keyword" content="{t("site-name")}"></meta>
<meta name="description" content="{t("описание-сайта")}"></meta>
<meta property="og:type" content="website"></meta>
<meta property="og:title" content="{t("имя-сайта")}"></meta>
<meta property="og:description" content="{t("описание-сайта")}"></meta>
<meta property="og:site_name" content="{t("имя-сайта")}"></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>{т("ааа")}</h1></Link>
</>)2. Многоязычная навигация. Облегчите поисковым системам обнаружение многоязычных URL-адресов.
иллюстрировать
Переключатель языка визуализируется на интерфейсе, поэтому я добавил многоязычную навигацию, отображаемую на серверной части, в нижней части страницы, которая представляет собой компонент Footer.js. Нажатие на соответствующий язык приведет к переходу на домашнюю страницу сайта на этом языке.
Код Footer.js выглядит следующим образом:
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. Резюме
Международная маршрутизация, структура и внедрение файлов перевода, а также реализация перевода. Независимо от того, какой план интернационализации, эти три аспекта будут задействованы. Хоть это и не хлопотно, в целом next-intl относительно прост.
9. Справочник
Глубокое погружение в локализацию маршрутизатора приложений Next.js с помощью next-intl
Полное руководство по настройке next-intl с помощью App Router
