Pengantarabangsaan yang dipertingkatkan (I18N) di Next.js 14

Next.js 14 Memudahkan pembangunan laman web berbilang bahasa. Artikel ini menunjukkan membina aplikasi seterusnya.

Ciri -ciri Utama:

perkembangan berbilang bahasa yang diperkemas dengan penghalaan bahasa dan pemuatan mesej dinamik.

• Panduan Praktikal mengenai Pengantarabangsaan (I18N) di Next.JS 14, termasuk persediaan projek, konfigurasi i18n, terjemahan berasaskan JSON, dan penghalaan khusus bahasa.
Penjelasan terperinci untuk mewujudkan slug bahasa untuk organisasi kandungan yang lebih baik, terutamanya bermanfaat untuk blog atau katalog produk. Ini melibatkan pemuatan mesej dinamik, middleware yang sepadan dengan locale untuk pengalihan, dan pengubahsuaian kepada susun atur dan komponen halaman.
pelaksanaan penukar bahasa dinamik yang mesra pengguna menggunakan router dan cangkuk seterusnya, meningkatkan pengalaman pengguna.
Membina Multiple Next.js 14 App:

Proses ini melibatkan langkah -langkah ini:

Persediaan Projek:
1. Buat projek next.js baru (mis.,

   ) dan pasang dan . Konfigurasikan npx create-next-app my-i18n-app dengan plugin next@latest. next-intl next.config.js next-intl

Kandungan Khusus Locale:
2. Buat folder

   dengan fail JSON (mis., , , content) Mengandungi terjemahan untuk setiap locale. Ini mengimbangi kekurangan penterjemahan automatik seterusnya. en.json es.json de.json

Memuatkan mesej dinamik:
3. Buat fail

   untuk mengimport fail JSON secara dinamik berdasarkan lokasi yang dikesan, memastikan kandungan menyesuaikan diri dengan keutamaan bahasa pengguna. Pengendalian ralat (mis., untuk tempatan yang tidak disokong) adalah penting. i18n.ts notFound

Routing bahasa dan middleware:
4. Melaksanakan fail

   menggunakan untuk menentukan tempat yang disokong, lokasi lalai, dan peraturan penghalaan untuk mengarahkan pengguna ke versi bahasa yang sesuai di laman web ini. Konfigurasi memastikan bahawa hanya laluan antarabangsa yang diproses. middleware.ts next-intl/middleware matcher

susun atur dan komponen halaman:
5. Ubah suai susun atur dan komponen halaman (mis.,

   , ) untuk menggunakan cangkuk dari app/layout.tsx untuk mengakses kandungan yang diterjemahkan. Struktur komponen anda untuk mengendalikan versi bahasa yang berbeza dengan berkesan. app/page.tsx

6. Komponen Switcher Bahasa: Membina komponen LangSwitcher.tsx yang menggunakan router next.js dan usePathname untuk menguruskan pemilihan bahasa dan penghalaan. Komponen ini menyediakan antara muka mesra pengguna untuk menukar antara bahasa. Mengintegrasikan komponen ini ke dalam susun atur anda (mis., app/layout.tsx).

Contoh kod lengkap untuk setiap langkah boleh didapati dalam artikel asal. Tanggapan yang disemak ini memberikan gambaran keseluruhan yang lebih ringkas dan teratur, mengekalkan maklumat utama dan penempatan imej.

Atas ialah kandungan terperinci Pengantarabangsaan yang dipertingkatkan (I18N) di Next.js 14. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!