Rumah > Artikel > hujung hadapan web > Panduan Pengantarabangsaan (i) dalam Next.js dengan Penghalaan

Panduan Pengantarabangsaan (i) dalam Next.js dengan Penghalaan

WBOYasal: 2024-07-17 16:13:27845semak imbas

Guide to Internationalisation (i) in Next.js with Routing

Pengantarabangsaan (i18n) ialah proses mereka bentuk aplikasi agar mudah disesuaikan dengan bahasa dan wilayah yang berbeza tanpa perubahan kejuruteraan. Dalam artikel ini, anda akan belajar cara menyediakan i18n dalam aplikasi Next.js dan mencipta penukar bahasa untuk menogol antara bahasa Inggeris dan Sepanyol menggunakan next-intl.

Pemasangan

Pertama, anda perlu memasang perpustakaan next-intl, yang memudahkan pengurusan pengantarabangsaan dalam Next.js. Jalankan arahan berikut dalam terminal anda:

npm install next-intl

Struktur Projek

Struktur projek adalah seperti berikut:

├── messages
│   ├── en.json
│   └── es.json
├── next.config.mjs
└── src
    ├── i18n.ts
    ├── middleware.ts
    └── app
        └── [locale]
            ├── layout.tsx
            └── page.tsx

1. Menyediakan Mesej Terjemahan

Buat direktori mesej pada akar projek anda. Di dalam direktori ini, tambahkan fail JSON untuk setiap bahasa yang anda mahu sokong.

messages/en.json

{
  "greeting": "Hello Codú",
  "farewell": "Goodbye Codú"
}

messages/es.json

{
  "greeting": "Hola Codú",
  "farewell": "Adiós Codú"
}

Fail ini mengandungi terjemahan frasa yang akan digunakan oleh aplikasi anda.

2. Mengkonfigurasi Seterusnya.js

Konfigurasikan Next.js untuk menyokong pengantarabangsaan dalam next.config.mjs.

next.config.mjs

import { getRequestConfig } from 'next-intl/server';

// List of supported languages
const locales = ['en', 'es'];

export default getRequestConfig(async ({ locale }) => {
  // Validate that the incoming `locale` parameter is valid
  if (!locales.includes(locale)) {
    return { notFound: true };
  }

  return {
    messages: (await import(`./messages/${locale}.json`)).default
  };
});

Fail ini mengkonfigurasi Next.js untuk memuatkan mesej terjemahan yang betul berdasarkan bahasa yang diminta.

3. Pengantarabangsaan Middleware

Buat perisian tengah untuk mengendalikan ubah hala dan menetapkan bahasa lalai.

src/middleware.ts

import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
  // List of all supported languages
  locales: ['en', 'es'],

  // Default language
  defaultLocale: 'en'
});

export const config = {
  // Only match internationalised pathnames
  matcher: ['/', '/(en|es)/:path*']
};

Perisian tengah ini mengendalikan pengalihan ke bahasa lalai jika tiada yang dinyatakan.

4. Konfigurasi Pengantarabangsaan

Buat fail konfigurasi untuk mengurus tetapan pengantarabangsaan.

src/i18n.ts

import { notFound } from 'next/navigation';
import { getRequestConfig } from 'next-intl/server';

const locales = ['en', 'es'];

export default getRequestConfig(async ({ locale }) => {
  if (!locales.includes(locale as any)) notFound();

  return {
    messages: (await import(`../messages/${locale}.json`)).default
  };
});

Fail ini mengesahkan tempat dan memuatkan mesej yang sepadan.

5. Menetapkan Susun Atur dan Halaman

Konfigurasikan reka letak dan halaman utama untuk menyokong pengantarabangsaan.

src/app/[locale]/layout.tsx

import { useLocale } from 'next-intl';
import { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  const locale = useLocale();
  return (
    <html lang={locale}>
      <body>{children}</body>
    </html>
  );
}

src/app/[locale]/page.tsx

import { useTranslations } from 'next-intl';

export default function Page() {
  const t = useTranslations();
  return (
    <div>
      <h1>{t('greeting')}</h1>
      <p>{t('farewell')}</p>
    </div>
  );
}

Fail ini mengkonfigurasi reka letak dan halaman utama untuk menggunakan terjemahan.

6. Mencipta Penukar Bahasa

Akhir sekali, buat penukar bahasa untuk menogol antara bahasa Inggeris dan Sepanyol.

src/app/[locale]/switcher.tsx

'use client';

import { useLocale } from 'next-intl';
import { useRouter } from 'next/navigation';
import { ChangeEvent, useTransition } from 'react';

export default function LocalSwitcher() {
  const [isPending, startTransition] = useTransition();
  const router = useRouter();
  const localActive = useLocale();

  const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {
    const nextLocale = e.target.value;
    startTransition(() => {
      router.replace(`/${nextLocale}`);
    });
  };

  return (
    <label className='border-2 rounded'>
      <p className='sr-only'>Change language</p>
      <select
        defaultValue={localActive}
        className='bg-transparent py-2'
        onChange={onSelectChange}
        disabled={isPending}
      >
        <option value='en'>English</option>
        <option value='es'>Spanish</option>
      </select>
    </label>
  );
}

Komponen ini membolehkan pengguna menukar bahasa antara muka.

Kesimpulan

Dengan langkah ini, anda telah berjaya menyediakan pengantarabangsaan dalam aplikasi Next.js anda dan mencipta penukar bahasa untuk menogol antara bahasa Inggeris dan Sepanyol. Ini akan membolehkan aplikasi anda menyokong berbilang bahasa dan memberikan pengalaman pengguna setempat.

Atas ialah kandungan terperinci Panduan Pengantarabangsaan (i) dalam Next.js dengan Penghalaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

json if for Directory using Interface finally JS default this

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana Saya Membina Pelayan Proksi Scratch Menggunakan Node.jsArtikel seterusnya：Bagaimana Saya Membina Pelayan Proksi Scratch Menggunakan Node.js

Artikel berkaitan

Lihat lagi