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.js

3. 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.

&#039;sonraki-intl&#039;den { useTranslations }&#039;ı içe aktar; &#039;@/navigation&#039;dan { Bağlantı }&#039;yı içe aktar; varsayılan işlevi dışa aktar Home({ params: { locale } }) { const t = useTranslations(); return (<>   
<link href="{"/"}"><h1>{t(&quot;aaa&quot;)}</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:

&#039;sonraki-intl&#039;den { useTranslations }&#039;ı içe aktar; &#039;@/navigation&#039;dan { Bağlantı }&#039;yı içe aktar; varsayılan işlevi dışa aktar Home({ params: { locale } }) { const t = useTranslations(); return (<>  
          <title>{t(&quot;site-adı&quot;)}</title>
        <meta name="keyword" content="{t("site-name")}"></meta>
        <meta name="description" content="{t(&quot;site açıklaması&quot;)}"></meta>
        <meta property="og:type" content="website"></meta>
        <meta property="og:title" content="{t(&quot;site-adı&quot;)}"></meta>
        <meta property="og:description" content="{t(&quot;site açıklaması&quot;)}"></meta>
        <meta property="og:site_name" content="{t(&quot;site-adı&quot;)}"></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(&quot;aaa&quot;)}</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