Heim > Artikel > Web-Frontend > Leitfaden zur Internationalisierung (i) in Next.js mit Routing
Leitfaden zur Internationalisierung (i) in Next.js mit Routing
- WBOYOriginal
- 2024-07-17 16:13:27799Durchsuche
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 umzuschaltenInstallation
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
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
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ú"
}
message/es.json
{
"greeting": "Hola Codú",
"farewell": "Adiós Codú"
}
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
};
});
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*']
};
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
};
});
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>
);
}
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>
);
}
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>
);
}
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!