Nextjs+I18n çoklu dil uluslararasılaştırmaya yönelik en iyi uygulamalar (arama motoru dostu)
Not: Bu en iyi uygulama sonraki sayfaların yönlendirmesine dayanmaktadır. Uygulama yönlendirme için uygun değil. Dizinin temel fikri next-i18ne kullanmaktır […]
Not: Bu en iyi uygulama sonraki sayfaların yönlendirmesine dayanmaktadır. Uygulama yönlendirme için uygun değil.
İçindekiler
Temel fikir
next-i18next'i kullanın.
[locales] dizinini "pages" dizinine ekleyin ve ana iş mantığını bu dizine yerleştirin.
Sayfalar dizinindeki indeks gibi sayfalar, dili belirlemek ve ardından karşılık gelen yerelleştirilmiş sayfa mantığını çağırmak için kullanılır.
Yerel ayarlar dizinini çeviri dosyaları için genel dizine ekleyin.
Düzenlemek
pnpm sonraki-i18sonraki tepki-i18sonraki i18nex'i ekleYapılandırma
Dosya Dizini
|bileşenler ..LangSwitcher.js ..LocLink.js ..MdRenderer.js |lib ..getStatic.js |sayfalar ..[yerel ayarlar] ....index.js .._app.js .._document.js .. index.js |public ..locales ....en ...common.json ...index.md ....es ...common.json ..... .index.md |next-i18next. config.js |sonraki.config.jsnext.config.js
const { i18n } = require('./next-i18next.config'); const nextConfig = { i18n }next-i18next.config.js
module.exports = { 'geliştirme', i18n: { defaultLocale: 'en', // locales: [ 'en', 'de', 'es',"cn"], locales: [ { name: "English", code: "en", iso: "en-US", dir: "ltr" }, { name: "español",code: "es", iso: "es-ES", dir: "ltr" }, { isim: "中文",kod: "zh_cn", iso: "zh-CN", dizin: "ltr" }, { isim: "Deutsch",kod: "de", iso: "de-DE", dizin: "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" }, ], }, }Yerel ayarların yapılandırılmasında, dil seçiminin kullanıcılara görüntülenmesi senaryosu göz önüne alındığında, İnternet'teki çoğu yapılandırma yöntemini takip etmedim.
lib/getStatic.js
"next-i18next/serverSideTranslations" öğesinden { serverSideTranslations } öğesini içe aktarın; "@/next-i18next.config" öğesinden i18nextConfig öğesini içe aktarın; const getI18nPaths = () => i18nextConfig.i18n.locales.map((lng) => ({ params : { locale: lng.code,//add code }, })); const'ı dışa aktar getStaticPaths = () => ({ geri dönüş: false, paths: getI18nPaths(), }); const'ı dışa aktar getI18nProps = async (ctx, ns) = ["ortak"]) => { const locale = ctx?.params?.locale || i18nextConfig.i18n.defaultLocale; let props = { ...(serverSideTranslations'ı bekliyor(locale, ns)) }; return props; }; const makeStaticProps'u dışa aktar = (ns = []) => async (ctx) => ({ props: wait getI18nProps(ctx, ns), });Bu, dil çeviri dosyasının elde edilmesi ve sunucu tarafında çevrilmesi için kullanılan mantıktır.
_app.js
"next-i18next" öğesinden { appWithTranslation } öğesini içe aktarın; '../components/layout' öğesinden Düzeni içe aktarın 'next' öğesinden { NextPage } öğesini içe aktarın; const MyApp = ({ Component, pageProps }) => ; varsayılan uygulamayı dışarı aktarWithTranslation(MyApp);
NOT: Kullanmıyorsanız Bu etiket doğrudan kaldırılabilir.
_docoument.js
i18nextConfig'i "@/next-i18next.config" adresinden içe aktarın; // Diğer kod içe aktarma Belgesi, { Html, Head, Main, NextScript, } 'next/document' sınıfından MyDocument, Belgeyi genişletir { 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>; } } varsayılan MyDocument'i dışa aktarindex.js
Ana Sayfayı içe aktar, "./[locale]/index" adresinden { getStaticProps }; varsayılan Ana Sayfayı dışa aktar; dışa aktar { getStaticProps }; [yerel ayarlar] klasörü
www.xxx.com/es'e benzer uluslararası yönlendirmeyi uygulamak için kullanılır
genel/yerel ayarlar klasörü
Çeviri dosyalarını depolamak için kullanılır.
bileşenler
Dil seçici: LangSwitcher.js
kod
'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
Talimatlar:
Bileşenleri tanıtın ve bunları doğrudan kullanın ve lang parametresi geçerli dile ayarlanmıştır.
LangSwitcher'ı './LangSwitcher'dan içe aktar const { i18n } = useTranslation('home');
Yerelleştirilmiş Bağlantı bileşeni: LocLink.js
React'ı "react"tan içe aktarın; Bağlantıyı "next/link"ten içe aktarın; { useRouter }'ı "next/router"dan içe aktarın; i18nextConfig'i '@/next-i18next.config'den içe aktarın const LinkComponent = ({ çocuklar, 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) konsol. log(locale) locale==i18nextConfig.i18n.defaultLocale ? href : router.pathname.replace("[locale]", locale); } console.log(href) return (
<>
<link href="{href}" legacybehavior>
<a {...rest}>{çocuklar}</a>
</Link>
</>
); }; varsayılan LinkComponent'i dışa aktar;Yerelleştirilmiş Markdown dosyası edinme ve işleme bileşenleri: MdRenderer.js
ReactMarkdown'u 'react-markdown'dan içe aktarın içe aktar { useState, useEffect } "react"tan; içe aktar { useRouter } "next/router"dan varsayılan işlevi dışa aktar MdRenderer({ yol }) { const [a, setA] = useState("" ); const router = useRouter() fetch(path, { next: { revalidate: 0 } }) .then(response => yanıt.text()) .then(data => { setA(veri) } ).catch( err=>{console.log(err)}) return ( {A && ( {A} )} ) }Talimatlar
t işlevi
- "useTranslation" ile tanışın
- t'yi tanımla
- {t('xxx')} kullanın, bu kadar
import { useTranslation } from "next-i18next"; const { t } = useTranslation(["common"]);//common.json çeviri dosyasıdır {t("xxx")}Mevcut dili nasıl edinebilirim?
"next-i18next" öğesinden { useTranslation } dosyasını içe aktarın; const { i18n } = useTranslation('home'); console.log(i18n.language)
Bir dil listesinde nasıl döngü yapılır?
Dil listesini alın ve dil gezinmesini özelleştirin.
i18nextConfig'i '@/next-i18next.config' adresinden içe aktarın {i18nextConfig.i18n.locales.map(locale => { if (locale.code === i18nextConfig.i18n.defaultLocale) return( {locale.name} ) const thehref="/"+locale.code return ( {locale.name} ) })} İçerik paragraflarının çevirisi
İçerik arka uçtan elde ediliyorsa buna gerek yoktur.
Bununla birlikte, eğer içerik ön uçta mevcutsa, onu json'da saklamak çok zahmetlidir. Bu nedenle, markdown'da saklanabilir ve ardından içeriğin görüntülenmesi gereken ilgili dil sürümünün markdown dosyası elde edilebilir ve daha sonra ayrıştırın ve görüntüleyin.
MdRenderer'ı '../../components/MdRenderer' adresinden içe aktarın
Özetle
Çoklu dil, bir web sitesinin daha fazla trafik almasını sağlar. Bu sonraki çoklu dil en iyi uygulaması, SEO'nun ihtiyaçlarını tamamen göz önünde bulundurmaktadır. Arama motoru dostu.
Araç istasyonları, anahtar kelime istasyonları, haber ve içerik istasyonları için uygundur.
