Nextjs+next-intl çoklu dil uluslararasılaştırma en iyi uygulaması (APP yönlendirici)
Nextjs'in iki yönlendiricisi vardır: APP yönlendiricisi ve Sayfa yönlendiricisi.
Bir süre önce, Page router altında nextjs uluslararası hale getirildi ve özetlendi:
Ancak Sayfa yönlendiricisi, Nextjs tarafından aşamalı olarak kullanımdan kaldırılan yönlendirici olacaktır. Bu nedenle, yakın zamanda Nextjs, APP yönlendiricisine dayalı olarak uluslararası hale getirildi.
1. Nextjs uluslararasılaştırma çözümünün seçimi
1. i18sonraki + tepki-i18sonraki + i18sonraki-kaynaklardan arka uca + sonraki-i18n-yönlendirici
Görünüşe göre çoğu insan bunu kullanıyor.Denedim ve oldukça karmaşıktı.Henüz başarılı olamadım, bu yüzden vazgeçtim.
2. next-i18n-router react-intl
Oldukça karmaşık görünüyordu ama 1'in gölgesi yüzünden vazgeçtim.
3. sonraki uluslararası
next-intl, nextjs için eksiksiz bir uluslararasılaştırma çözümüdür ve başka yazılım paketleri gerektirmez. Ve konfigürasyon nispeten basittir. Daha da önemlisi, başarıyla yapılandırdım ve hiçbir açıklanamayan sorunla karşılaşmadım.
İşte bu kadar.
2. Dizin yapısı
|app ..[locale] ...layout.js ...page.js |bileşenler ..LangSwitcher.js |public ..locales ...tr ....common.json ...es .... common.json |i18n.js |navigation.js |middleware.js |next.config.js3. Uluslararası yönlendirme
1. navigasyon.js
Bu bir yapılandırma dosyasıdır ve bu dosyada yapılandırılan öğeler diğer bazı dosyalarda da çağrılacaktır.
'next-intl/navigation'dan { createSharedPathnamesNavigation }'ı içe aktarın; const locales = ['en', 'de', 'es', 'ja','ko','it','pt'] dışa aktarın; const localePrefix'i dışa aktarın = 'gerektiği gibi'; dışa aktarma const defaultLocale= "tr"; dışa aktarma const localeItems= [ { name: "English",code: "en", iso: "en-US", dir: "ltr" }, { name : "español",kod: "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" }, ] ihracat const { Bağlantı , yönlendirme, usePathname, useRouter } = createSharedPathnamesNavigation({ locales, localePrefix });2. [yerel] dizin
Uygulama dizinindeki tüm sayfa dosyaları [yerel] dizinine yerleştirilir.
3. Ara yazılım: ara yazılım.js
gözünde canlandırmak:
Aşağıdaki URL stilini uygulayın
Varsayılan dil URL'si:
Ana sayfa: www.xxx.com
İç sayfa: www.xxx.com/about
Diğer dillerdeki URL'ler: (Örnek olarak İspanyolca'yı alın)
Ana sayfa: www.xxx.com/es
İç sayfa: www.xxx.com/es/about
Ayrıca URL'ye varsayılan dil girilmişse, örneğin varsayılan dil İngilizce ise kullanıcı şu URL'yi girer: www.xxx.com/en
Daha sonra otomatik olarak www.xxx.com adresine gidecektir.
Kod:
createMiddleware'i "next-intl/middleware"den içe aktarın; '@/navigation'dan { defaultLocale, localePrefix, locales }'i içe aktarın; varsayılan createMiddleware'i dışa aktarın({ locales, localePrefix, defaultLocale, localeDetection: false, }); const config'i dışa aktar = { / / Uluslararasılaştırılmaması gereken tüm yolları atlayın. // Bu, "api", "_next" klasörlerini ve uzantılı tüm dosyaları // atlar (örn. favicon.ico) eşleştirici: ["/((?!api|_next| .*\\..*).*)"], };4. Çeviri dosyalarını yükleyin
1. Dosyaları çevirin
gözünde canlandırmak
Çeviri dosyalarım "genel" dizine yerleştirildi, ancak aslında çeviri dosyaları, i18n.js dosyasında ilgili yol yapılandırıldığı sürece diğer dizinlere de yerleştirilebilir.
Çeviri dosyası bir json dosyasıdır ve json dosyası iç içe formatta olabilir veya olmayabilir. Sonuçta ikisine biraz farklı atıfta bulunulacak.
Kod (yuvalanmış değil)
{ "aaa": "merhaba", }Kod (yuvalanmış)
{ "bbb":{ "aaa":"merhaba", } }2.i18n.js dosyası
gözünde canlandırmak:
Bu dosya, çeviri dosyalarını içe aktarmak için kullanılır. Anahtar, çeviri dosyasının bulunduğu yolla tutarlı olması gereken çeviri dosyasının yolunu yapılandırmaktır.
Yoldaki ${yerel ayar} dili belirtir.
kod
import { getRequestConfig } from "next-intl/server"; // Bu yapılandırmayı istek başına bir kez oluşturun ve // tüm Sunucu Bileşenleri tarafından kullanılabilir hale getirin. etkin yerel ayar mesajları için: (await import(`./public/locales/${locale}/common.json`)).default, }));3. next.config.js yapılandırması
/** @type {import('sonraki').NextConfig} */ const nextConfig = {} const withNextIntl = require("next-intl/plugin")("./i18n.js"); module.exports =withNextIntl (nextConfig)5. Çeviriyi uygulayın
Layout.js'deki kod:
"./globals.css" içe aktar; 'next-intl'den { NextIntlClientProvider, useMessages }'i içe aktarın; '@/navigation'dan { locales }'i içe aktarın; '@/components/Header'dan Başlığı içe aktarın '@/components'tan Altbilgiyi içe aktarın /Footer' varsayılan işlevi dışa aktar RootLayout({ çocuklar, params: { locale } }) { if (!locales.includes(locale)) { notFound(); } const message = useMessages(); return (
<html lang="{locale}">
<nextintlclientprovider locale="{locale}" messages="{messages}">
<body><header />{çocuklar}<footer /></body>
</nextintlclientprovider>
</html>
);
}
page.js'deki kod:
locale parametresi geçerli dili temsil eder.
Çeviri dosyası iç içe değilse const t = useTranslations();
Çeviri dosyası iç içe yerleştirilmişse, dosya yapısına ve gerçek ihtiyaçlara göre const t = useTranslations("bbb"); gibi bir şey kullanın.
'sonraki-intl'den { useTranslations }'ı içe aktar; '@/navigation'dan { Bağlantı }'yı içe aktar; varsayılan işlevi dışa aktar Home({ params: { locale } }) { const t = useTranslations(); return (<>
<link href="{"/"}"><h1>{t("aaa")}</h1></Link>
</>)6. Dil değiştirici
1. Etki
Bir dil seçmek için aşağı çekin; geçerli sayfa, seçilen dildeki sayfaya geçiş yapar.
2. Kod
"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 ve arama motoru dostu
1. Meta veriler
Nextjs APP yönlendiricisi sayfanın başlığını ve Meta verilerini oluşturur. Üç yöntem denedim:
İlk yol: doğrudan yerleşim.js'de kullanın: Expert const metadata={}
İkinci yol: page.js'de dinamik olarak oluşturulan Meta verilerini kullanın
Referans için:Optimize etme: Meta Veriler | Next.js (nextjs.org)
Bu iki şekilde, çoklu dil başlığı ve Meta verileri konusunda başarısız oldum. Son olarak, aynı zamanda en basit ve anlaşılır yöntem olan üçüncü yönteme başvurulmuştur.
Üçüncü yol: Başlık etiketini ve Meta etiketini doğrudan page.js'ye yazın.
Bu nedenle page.js'nin kodu şu şekilde değiştirildi:
'sonraki-intl'den { useTranslations }'ı içe aktar; '@/navigation'dan { Bağlantı }'yı içe aktar; varsayılan işlevi dışa aktar Home({ params: { locale } }) { const t = useTranslations(); return (<>
<title>{t("site-adı")}</title>
<meta name="keyword" content="{t("site-name")}"></meta>
<meta name="description" content="{t("site açıklaması")}"></meta>
<meta property="og:type" content="website"></meta>
<meta property="og:title" content="{t("site-adı")}"></meta>
<meta property="og:description" content="{t("site açıklaması")}"></meta>
<meta property="og:site_name" content="{t("site-adı")}"></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>{t("aaa")}</h1></Link>
</>)2. Çok dilli gezinme: Arama motorlarının çok dilli URL'leri keşfetmesini kolaylaştırın
gözünde canlandırmak
Dil değiştirici ön uçta oluşturulmuştur, bu yüzden sayfanın alt kısmına Footer.js bileşeni olan arka uçta işlenmiş çok dilli gezinmeyi ekledim. İlgili dile tıklamak, web sitesinin bu dildeki ana sayfasına yönlendirecektir.
Footer.js kodu aşağıdaki gibidir:
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. Özet
Uluslararası yönlendirme, çeviri dosyalarının yapısı ve tanıtımı ve çevirinin uygulanması. Ne tür bir uluslararasılaşma planı olursa olsun, bu üç unsur işin içine dahil olacaktır. Zahmetli olmasa da genel olarak next-intl nispeten basittir.
9. Referans
next-intl ile Next.js Uygulama Yönlendirici Yerelleştirmesine Derin Bir Bakış
Uygulama Yönlendiricisi ile next-intl kurulumu için eksiksiz bir kılavuz
