Aufbau einer mehrsprachigen Taschenrechner-Plattform mit Next.js 15
Ausführliche Analyse zum Aufbau einer leistungsstarken mehrsprachigen Taschenrechner-Plattform mit Next.js 15, React 19 und next-intl, einschließlich Internationalisierung, SEO- und Performance-Optimierung.
Hallo, liebe Entwickler! 👋
Wenn Sie jemals versucht haben, eine Website zu erstellen, die für Benutzer auf der ganzen Welt funktionieren muss, wissen Sie, wie herausfordernd das sein kann. Ich habe kürzlich eine Reise begonnen, um Free Calculators zu erstellen - eine Plattform, die Benutzer in 12 verschiedenen Sprachen bedient, und lassen Sie mich Ihnen sagen, das war ein richtiges Abenteuer!
In diesem Beitrag möchte ich die echte Geschichte hinter dem Aufbau dieser mehrsprachigen Taschenrechner-Plattform teilen. Nicht nur die "hier ist, was wir getan haben" Version, sondern die "hier ist, was tatsächlich passiert ist, was schief gelaufen ist, und was wir gelernt haben" Version. Denn ehrlich gesagt, das Bauen für ein globales Publikum ist kein Spaziergang im Park.
Warum Wir Das Gebaut Haben (Und Warum Es Wichtig Ist)
Stellen Sie sich das vor: Sie bauen eine Taschenrechner-App. Ziemlich einfach, oder? Aber dann realisieren Sie, dass jemand in Japan sie vielleicht auf Japanisch braucht, jemand in Brasilien vielleicht Portugiesisch bevorzugt, und Ihre deutschen Benutzer wollen definitiv, dass ihre Zahlen im deutschen Format formatiert werden (1.234,56 statt 1,234.56). Plötzlich wird Ihr einfacher Taschenrechner zu einem komplexen internationalen Projekt.
Das ist genau das, was uns passiert ist. Wir haben mit einem einfachen Taschenrechner angefangen und sind am Ende dabei gelandet, eine Plattform zu bauen, die Benutzer aus verschiedenen Kulturen, Sprachen und Zahlenformaten bedient. Und wissen Sie was? Es ist eines der lohnendsten Projekte geworden, an denen ich gearbeitet habe.
Tech-Stack-Entscheidungen: Warum Wir Diese Tools Gewählt Haben
Warum Next.js 15?
Um ehrlich zu sein, als Next.js 15 zum ersten Mal herauskam, waren wir ein wenig zögerlich. Schließlich, "wenn es nicht kaputt ist, reparieren Sie es nicht", richtig? Aber als wir den neuen App Router und die React 19 Integration sahen, beschlossen wir, den Sprung zu wagen. Es stellte sich als eine kluge Wahl heraus.
// So haben wir unser Routing eingerichtet
export const routing = defineRouting({
locales: [
'en',
'zh',
'ja',
'ko',
'fr',
'de',
'es',
'pt',
'ru',
'ar',
'hi',
'it',
],
defaultLocale: 'en',
localePrefix: 'as-needed', // Diese Einstellung hat uns viele Kopfschmerzen erspart
localeDetection: true,
});
React 19: Lohnt Sich Das Upgrade?
Kurze Antwort: Absolut! Lange Antwort: Wir sind auf einige Kompatibilitätsprobleme gestoßen, aber die Leistungsverbesserungen der neuen Features sind signifikant. Besonders die Verbesserungen an Suspense und Concurrent Features haben unsere Benutzererfahrung viel besser gemacht.
TypeScript: Unser Lebensretter
Ich kann mir nicht vorstellen, Übersetzungsdateien für 12 Sprachen ohne TypeScript zu verwalten. Typsicherheit gab uns Vertrauen beim Refactoring, besonders beim Umgang mit komplexen verschachtelten Übersetzungsobjekten.
// So definieren wir unsere Übersetzungstypen
interface TranslationKeys {
nav: {
siteName: string;
home: string;
calculators: string;
};
common: {
calculate: string;
clear: string;
result: string;
};
}
Internationalisierungs-Implementierung: Echte Herausforderungen und Lösungen
Herausforderung 1: Die Komplexität der Spracherkennung
Sie könnten denken, "Spracherkennung? Einfach!" Aber das ist es nicht. Benutzer könnten von verschiedenen Geräten zugreifen, VPNs verwenden oder spezifische Spracheinstellungen haben. Wir haben viel Zeit damit verbracht, unsere Spracherkennungslogik zu perfektionieren.
// Unsere Middleware-Konfiguration
import createMiddleware from 'next-intl/middleware';
import { routing } from '@/i18n/routing';
export default createMiddleware(routing);
export const config = {
matcher: '/((?!api|trpc|_next|_vercel|.*\\..*).*)',
};
Herausforderung 2: Übersetzungsdatei-Verwaltung
Das Verwalten von Übersetzungsdateien für 12 Sprachen ist wie das Verwalten von 12 verschiedenen Projekten. Wir haben einige Automatisierungsskripte entwickelt, um uns zu helfen:
// Unser Übersetzungsverwaltungsskript
const addMissingTranslations = async () => {
const baseTranslations = await loadTranslations('en');
const allLocales = await getAllLocales();
for (const locale of allLocales) {
const existingTranslations = await loadTranslations(locale);
const missingKeys = findMissingKeys(baseTranslations, existingTranslations);
if (missingKeys.length > 0) {
console.log(`Missing keys in ${locale}:`, missingKeys);
await addMissingKeys(locale, missingKeys);
}
}
};
Herausforderung 3: Die Zahlenformatierungsfalle
Das war eine der interessantesten Herausforderungen. Wussten Sie, dass verschiedene Länder verschiedene Zahlenformate haben? Deutschland verwendet Kommas als Dezimaltrennzeichen, die USA verwenden Punkte. Wir sind auf viele Probleme gestoßen, als wir Währungsberechnungen handhabten, bis wir ordnungsgemäße lokalisierte Formatierung implementierten.
SEO-Optimierung: Suchmaschinen Dazu Bringen, Uns Zu Lieben
Die Macht der Statischen Site-Generierung
Wir beschlossen, Statische Site-Generierung (SSG) zu verwenden, was die beste Entscheidung sein könnte, die wir jemals getroffen haben. Nicht nur sind die Seiten blitzschnell, auch die SEO-Ergebnisse sind ausgezeichnet.
// Statische Seiten für jede Sprache generieren
export const dynamic = 'force-static';
export function generateStaticParams() {
return routing.locales
.filter(locale => locale !== routing.defaultLocale)
.map(locale => ({ locale }));
}
Die Kunst der Metadaten-Generierung
Das Generieren korrekter Metadaten für jede Sprache erfordert etwas Finesse. Wir haben ein System entwickelt, um automatisch SEO-freundliche Metadaten zu generieren:
export async function generateMetadata({
params,
}: {
params: Promise<{ locale: string }>;
}): Promise<Metadata> {
const { locale } = await params;
const t = await getTranslations({ locale, namespace: 'Home' });
return {
title: t('title'),
description: t('description'),
openGraph: {
title: t('title'),
description: t('description'),
locale: locale,
},
};
}
Leistungsoptimierung: Die Benutzererfahrung Flüssig Machen
Die Wichtigkeit der Bildoptimierung
Wir haben viel Zeit damit verbracht, das Laden von Bildern zu optimieren. Die Übernahme von AVIF- und WebP-Formaten verbesserte unsere Seiteladezeiten um 40%.
// Bildkonfiguration in next.config.ts
images: {
formats: ['image/avif', 'image/webp'],
domains: ['freecalculators.app'],
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
}
Cache-Strategie: Unsere Geheimwaffe
Das Implementieren der richtigen Cache-Strategie erforderte einige Versuche und Irrtümer. Wir endeten mit einem geschichteten Cache-Ansatz:
async headers() {
return [
// Starker Cache für statische Assets
{
source: '/(.*).(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot)',
headers: [{
key: 'Cache-Control',
value: 'public, max-age=31536000, immutable',
}],
},
// Verhandelter Cache für Seiten
{
source: '/(.*)',
headers: [{
key: 'Cache-Control',
value: 'public, max-age=0, must-revalidate',
}],
},
];
}
Benutzererfahrungs-Design: Jeden Willkommen Fühlen Lassen
Die Herausforderung des Responsive Designs
Sicherzustellen, dass unsere Taschenrechner auf allen Geräten perfekt funktionieren, ist eine anhaltende Herausforderung. Wir haben einen Mobile-First-Ansatz gewählt:
// Mobile-First responsive Layout
<div className="flex flex-col md:flex-row gap-4">
<div className="w-full md:w-1/2">
{/* Taschenrechner-Interface */}
</div>
<div className="w-full md:w-1/2">
{/* Ergebnisanzeige */}
</div>
</div>
Barrierefreiheit: Mehr als Nur Compliance
Wir erkannten, dass Barrierefreiheit nicht nur eine rechtliche Anforderung ist - es ist das Richtige. Wir haben angemessene ARIA-Labels zu jedem interaktiven Element hinzugefügt:
<button
aria-label={t('common.calculate')}
aria-describedby="calculator-help"
className="bg-blue-600 text-white px-4 py-2 rounded"
>
{t('common.calculate')}
</button>
Entwicklungs-Toolchain: Die Entwicklung Effizienter Machen
Fehlerüberwachung: Unser Sicherheitsnetz
Wir haben Sentry für die Fehlerüberwachung integriert, was uns geholfen hat, viele Probleme zu entdecken, die wir nie erwartet hatten:
export default withSentryConfig(withNextIntl(nextConfig), {
org: 'my-projects-pd',
project: 'free-calculators',
widenClientFileUpload: true,
disableLogger: true,
automaticVercelMonitors: true,
});
Automatisierte Übersetzungsverwaltung
Wir haben einige Skripte entwickelt, um Übersetzungsdateien zu verwalten, und diese Skripte sind jetzt ein unverzichtbarer Teil unseres Arbeitsablaufs.
Lektionen, Die Wir Gelernt Haben
1. Denken Sie von Anfang an an Internationalisierung
Wenn Sie denken, dass Sie möglicherweise mehrsprachigen Support benötigen, entwerfen Sie ihn von Anfang an. Internationalisierung später hinzuzufügen ist viel schwieriger, als sie von Anfang an zu entwerfen.
2. Benutzererfahrung Über Technische Zurschaustellung
Wir haben viel Zeit damit verbracht, die Leistung zu optimieren, aber letztendlich kümmern sich Benutzer am meisten darum, ob die Benutzeroberfläche intuitiv ist und Berechnungen genau sind.
3. Automatisierung ist der Schlüssel
Das manuelle Verwalten von Übersetzungen für 12 Sprachen ist unrealistisch. Automatisierungsskripte sind die Lebensader unseres Projekts.
4. Testen, Testen und Nochmals Testen
Verschiedene Sprachen haben verschiedene Textlängen, verschiedene Zahlenformate und verschiedene kulturelle Erwartungen. Gründliches Testen ist ein Muss.
Zukünftige Pläne
Wir erwägen, mehr Sprachen hinzuzufügen, unseren Übersetzungsverwaltungsprozess zu verbessern und KI-gestützte Übersetzungsmöglichkeiten zu erkunden. Aber am wichtigsten ist, dass wir weiterhin die beste Taschenrechnererfahrung für Benutzer bieten möchten.
Fazit
Das Bauen einer mehrsprachigen Webanwendung ist eine Herausforderung, aber es ist auch eine sehr lohnende Erfahrung. Durch kluge Technologiewahl und viele Tests haben wir erfolgreich eine Plattform erstellt, die wirklich globale Benutzer bedient.
Wenn Sie erwägen, eine mehrsprachige Anwendung zu erstellen, hoffe ich, dass dieser Artikel Ihnen etwas Inspiration gibt. Denken Sie daran, dass jede Herausforderung eine Lernmöglichkeit ist und jeder Fehler ein Sprungbrett zum Erfolg.
Projekt-Link: https://www.freecalculators.app Tech-Stack: Next.js 15, React 19, TypeScript, Tailwind CSS, next-intl