Leitfaden zur Internationalisierung (i) in Next.js mit Routing-js-Tutorial-php.cn

Leitfaden zur Internationalisierung (i) in Next.js mit Routing

WBOY

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

Original

868 Leute haben es durchsucht

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

Internationalisierung (i18n) ist der Prozess des Entwerfens einer Anwendung, die ohne technische Änderungen problemlos an verschiedene Sprachen und Regionen angepasst werden kann. In diesem Artikel erfahren Sie, wie Sie i18n in einer Next.js-Anwendung einrichten und mit next-intl.

einen Sprachumschalter erstellen, um zwischen Englisch und Spanisch umzuschalten

Installation

Zuerst müssen Sie die next-intl-Bibliothek installieren, die die Verwaltung der Internationalisierung in Next.js erleichtert. Führen Sie den folgenden Befehl in Ihrem Terminal aus:

npm install next-intl

Nach dem Login kopieren

Projektstruktur

Die Projektstruktur wird wie folgt sein:

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

Nach dem Login kopieren

1. Einrichten von Übersetzungsnachrichten

Erstellen Sie ein Nachrichtenverzeichnis im Stammverzeichnis Ihres Projekts. Fügen Sie in diesem Verzeichnis JSON-Dateien für jede Sprache hinzu, die Sie unterstützen möchten.

message/en.json

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

Nach dem Login kopieren

message/es.json

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

Nach dem Login kopieren

Diese Dateien enthalten die Übersetzungen der Phrasen, die Ihre Anwendung verwenden wird.

2. Next.js konfigurieren

Konfigurieren Sie Next.js zur Unterstützung der Internationalisierung in 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
  };
});

Nach dem Login kopieren

Diese Datei konfiguriert Next.js so, dass die richtigen Übersetzungsnachrichten basierend auf der angeforderten Sprache geladen werden.

3. Internationalisierungs-Middleware

Erstellen Sie Middleware, um die Umleitung zu verwalten und die Standardsprache festzulegen.

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

Nach dem Login kopieren

Diese Middleware übernimmt die Umleitung zur Standardsprache, wenn keine angegeben ist.

4. Internationalisierungskonfiguration

Erstellen Sie eine Konfigurationsdatei, um die Internationalisierungseinstellungen zu verwalten.

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

Nach dem Login kopieren

Diese Datei validiert die Gebietsschemas und lädt die entsprechenden Nachrichten.

5. Layout und Seite einrichten

Konfigurieren Sie das Layout und die Hauptseite, um die Internationalisierung zu unterstützen.

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Diese Dateien konfigurieren das Layout und die Hauptseite für die Verwendung der Übersetzungen.

6. Erstellen des Sprachumschalters

Schließlich erstellen Sie einen Sprachumschalter, um zwischen Englisch und Spanisch umzuschalten.

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

Nach dem Login kopieren

Mit dieser Komponente können Benutzer die Sprache der Benutzeroberfläche ändern.

Abschluss

Mit diesen Schritten haben Sie die Internationalisierung in Ihrer Next.js-Anwendung erfolgreich eingerichtet und einen Sprachumschalter zum Umschalten zwischen Englisch und Spanisch erstellt. Dadurch kann Ihre Anwendung mehrere Sprachen unterstützen und ein lokalisiertes Benutzererlebnis bieten.

Das obige ist der detaillierte Inhalt vonLeitfaden zur Internationalisierung (i) in Next.js mit Routing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!