Panduan Pengantarabangsaan (i) dalam Next.js dengan Penghalaan-tutorial js-php.cn

Panduan Pengantarabangsaan (i) dalam Next.js dengan Penghalaan

WBOY

Lepaskan： 2024-07-17 16:13:27

asal

891 orang telah melayarinya

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

Salin selepas log masuk

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

Salin selepas log masuk

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ú"
}

Salin selepas log masuk

messages/es.json

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

Salin selepas log masuk

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
  };
});

Salin selepas log masuk

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*']
};

Salin selepas log masuk

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
  };
});

Salin selepas log masuk

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>
  );
}

Salin selepas log masuk

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>
  );
}

Salin selepas log masuk

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>
  );
}

Salin selepas log masuk

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!