Construction d'une Plateforme de Calculatrices Multilingue avec Next.js 15

Salut, chers développeurs ! 👋

Si vous avez déjà essayé de construire un site web qui doit fonctionner pour des utilisateurs du monde entier, vous savez à quel point cela peut être difficile. J'ai récemment entrepris de créer Free Calculators - une plateforme qui sert des utilisateurs dans 12 langues différentes, et laissez-moi vous dire que c'était une vraie aventure !

Dans cet article, je veux partager l'histoire réelle derrière la construction de cette plateforme de calculatrices multilingue. Pas seulement la version "voici ce que nous avons fait", mais la version "voici ce qui s'est réellement passé, ce qui s'est mal passé, et ce que nous avons appris". Parce qu'honnêtement, construire pour un public mondial n'est pas une promenade de santé.

Pourquoi Nous Avons Construit Cela (Et Pourquoi C'est Important)

Imaginez ceci : Vous construisez une application de calculatrice. Assez simple, n'est-ce pas ? Mais ensuite vous réalisez que quelqu'un au Japon pourrait en avoir besoin en japonais, quelqu'un au Brésil pourrait préférer le portugais, et vos utilisateurs allemands veulent absolument que leurs chiffres soient formatés à l'allemande (1.234,56 au lieu de 1,234.56). Soudainement, votre simple calculatrice devient un projet international complexe.

C'est exactement ce qui nous est arrivé. Nous avons commencé avec une calculatrice de base et nous nous sommes retrouvés à construire une plateforme qui sert des utilisateurs de différentes cultures, langues et formats de nombres. Et vous savez quoi ? C'est devenu l'un des projets les plus enrichissants sur lesquels j'ai travaillé.

Décisions de Stack Technologique : Pourquoi Nous Avons Choisi Ces Outils

Pourquoi Next.js 15 ?

Pour être honnête, quand Next.js 15 est sorti pour la première fois, nous étions un peu hésitants. Après tout, "si ce n'est pas cassé, ne le réparez pas", n'est-ce pas ? Mais quand nous avons vu le nouveau App Router et l'intégration React 19, nous avons décidé de faire le saut. Cela s'est avéré être un choix judicieux.

// C'est ainsi que nous avons configuré notre routage
export const routing = defineRouting({
  locales: [
    'en',
    'zh',
    'ja',
    'ko',
    'fr',
    'de',
    'es',
    'pt',
    'ru',
    'ar',
    'hi',
    'it',
  ],
  defaultLocale: 'en',
  localePrefix: 'as-needed', // Ce paramètre nous a évité beaucoup de maux de tête
  localeDetection: true,
});

React 19 : Vaut-il la Peine de Mettre à Jour ?

Réponse courte : Absolument ! Réponse longue : Nous avons rencontré quelques problèmes de compatibilité, mais les améliorations de performance des nouvelles fonctionnalités sont significatives. Surtout les améliorations de Suspense et des fonctionnalités concurrentes ont rendu notre expérience utilisateur beaucoup meilleure.

TypeScript : Notre Sauveur

Je ne peux pas imaginer gérer des fichiers de traduction pour 12 langues sans TypeScript. La sécurité des types nous a donné confiance lors du refactoring, surtout lors de la gestion d'objets de traduction imbriqués complexes.

// C'est ainsi que nous définissons nos types de traduction
interface TranslationKeys {
  nav: {
    siteName: string;
    home: string;
    calculators: string;
  };
  common: {
    calculate: string;
    clear: string;
    result: string;
  };
}

Implémentation de l'Internationalisation : Vrais Défis et Solutions

Défi 1 : La Complexité de la Détection de Langue

Vous pourriez penser, "Détection de langue ? Facile !" Mais ce n'est pas le cas. Les utilisateurs peuvent accéder depuis différents appareils, utiliser des VPN, ou avoir des préférences linguistiques spécifiques. Nous avons passé beaucoup de temps à perfectionner notre logique de détection de langue.

// Notre configuration de middleware
import createMiddleware from 'next-intl/middleware';
import { routing } from '@/i18n/routing';

export default createMiddleware(routing);

export const config = {
  matcher: '/((?!api|trpc|_next|_vercel|.*\\..*).*)',
};

Défi 2 : Gestion des Fichiers de Traduction

Gérer des fichiers de traduction pour 12 langues, c'est comme gérer 12 projets différents. Nous avons développé quelques scripts d'automatisation pour nous aider :

// Notre script de gestion des traductions
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);
    }
  }
};

Défi 3 : Le Piège du Formatage des Nombres

C'était l'un des défis les plus intéressants. Saviez-vous que différents pays ont différents formats de nombres ? L'Allemagne utilise des virgules comme séparateurs décimaux, les États-Unis utilisent des points. Nous avons rencontré de nombreux problèmes lors de la gestion des calculs de devises jusqu'à ce que nous implémentions un formatage localisé approprié.

Optimisation SEO : Faire en Sorte que les Moteurs de Recherche Nous Aiment

Le Pouvoir de la Génération de Site Statique

Nous avons décidé d'utiliser la Génération de Site Statique (SSG), ce qui pourrait être la meilleure décision que nous ayons jamais prise. Non seulement les pages sont ultra-rapides, mais les résultats SEO sont excellents aussi.

// Générer des pages statiques pour chaque langue
export const dynamic = 'force-static';

export function generateStaticParams() {
  return routing.locales
    .filter(locale => locale !== routing.defaultLocale)
    .map(locale => ({ locale }));
}

L'Art de la Génération de Métadonnées

Générer des métadonnées correctes pour chaque langue nécessite une certaine finesse. Nous avons développé un système pour générer automatiquement des métadonnées SEO-friendly :

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

Optimisation des Performances : Rendre l'Expérience Utilisateur Fluide

L'Importance de l'Optimisation des Images

Nous avons passé beaucoup de temps à optimiser le chargement des images. L'adoption des formats AVIF et WebP a amélioré nos vitesses de chargement de page de 40%.

// Configuration des images dans 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],
}

Stratégie de Cache : Notre Arme Secrète

Implémenter la bonne stratégie de cache a nécessité quelques essais et erreurs. Nous avons fini par adopter une approche de cache multicouche :

async headers() {
  return [
    // Cache fort pour les ressources statiques
    {
      source: '/(.*).(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot)',
      headers: [{
        key: 'Cache-Control',
        value: 'public, max-age=31536000, immutable',
      }],
    },
    // Cache négocié pour les pages
    {
      source: '/(.*)',
      headers: [{
        key: 'Cache-Control',
        value: 'public, max-age=0, must-revalidate',
      }],
    },
  ];
}

Conception de l'Expérience Utilisateur : Faire en Sorte que Tout le Monde Se Sente le Bienvenu

Le Défi du Design Responsive

S'assurer que nos calculatrices fonctionnent parfaitement sur tous les appareils est un défi permanent. Nous avons adopté une approche mobile-first :

// Layout responsive mobile-first
<div className="flex flex-col md:flex-row gap-4">
  <div className="w-full md:w-1/2">
    {/* Interface de calculatrice */}
  </div>
  <div className="w-full md:w-1/2">
    {/* Affichage des résultats */}
  </div>
</div>

Accessibilité : Plus que la Simple Conformité

Nous avons réalisé que l'accessibilité n'est pas seulement une exigence légale - c'est la bonne chose à faire. Nous avons ajouté des étiquettes ARIA appropriées à chaque élément interactif :

<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>

Chaîne d'Outils de Développement : Rendre le Développement Plus Efficace

Surveillance des Erreurs : Notre Filet de Sécurité

Nous avons intégré Sentry pour la surveillance des erreurs, ce qui nous a aidés à découvrir de nombreux problèmes que nous n'avions jamais anticipés :

export default withSentryConfig(withNextIntl(nextConfig), {
  org: 'my-projects-pd',
  project: 'free-calculators',
  widenClientFileUpload: true,
  disableLogger: true,
  automaticVercelMonitors: true,
});

Gestion Automatisée des Traductions

Nous avons développé quelques scripts pour gérer les fichiers de traduction, et ces scripts font maintenant partie intégrante de notre flux de travail.

Leçons Que Nous Avons Apprises

1. Pensez à l'Internationalisation Dès le Début

Si vous pensez que vous pourriez avoir besoin de support multilingue, concevez-le dès le début. Ajouter l'internationalisation plus tard est beaucoup plus difficile que de la concevoir dès le départ.

2. L'Expérience Utilisateur Avant le Spectacle Technique

Nous avons passé beaucoup de temps à optimiser les performances, mais en fin de compte, les utilisateurs se soucient le plus de savoir si l'interface est intuitive et si les calculs sont précis.

3. L'Automatisation est Clé

Gérer manuellement les traductions pour 12 langues n'est pas réaliste. Les scripts d'automatisation sont la bouée de sauvetage de notre projet.

4. Testez, Testez et Testez Encore

Différentes langues ont différentes longueurs de texte, différents formats de nombres et différentes attentes culturelles. Des tests approfondis sont un must.

Plans Futurs

Nous envisageons d'ajouter plus de langues, d'améliorer notre processus de gestion des traductions et d'explorer les possibilités de traduction assistée par IA. Mais surtout, nous voulons continuer à fournir aux utilisateurs la meilleure expérience de calculatrice.

Conclusion

Construire une application web multilingue est un défi, mais c'est aussi une expérience très enrichissante. Grâce à des choix technologiques intelligents et beaucoup de tests, nous avons créé avec succès une plateforme qui sert vraiment les utilisateurs mondiaux.

Si vous envisagez de construire une application multilingue, j'espère que cet article vous donne de l'inspiration. N'oubliez pas que chaque défi est une opportunité d'apprentissage, et chaque erreur est un tremplin vers le succès.

---

Lien du Projet : https://www.freecalculators.app Stack Technologique : Next.js 15, React 19, TypeScript, Tailwind CSS, next-intl