Sites rapides, performants, modernes.

Pourquoi Next.js plutôt que WordPress en 2026

WordPress propulse encore environ 30% du web mondial, ce qui en fait un choix par défaut pour beaucoup d'agences. Le constat factuel est plus nuancé qu'il n'y paraît. Les performances par défaut sont médiocres : sur un site WordPress moyen avec un thème commercial et une dizaine de plugins, le LCP dépasse régulièrement 3 secondes sur mobile, là où Google considère 2.5s comme le seuil acceptable. Chaque plugin ajoute du PHP exécuté à chaque requête, des requêtes SQL supplémentaires, du CSS et du JavaScript injectés dans le head. La plupart des sites WordPress en production cumulent 30 à 60 requêtes côté serveur par page rendue.

La sécurité est l'autre talon d'Achille. Les plugins tiers vulnérables sont la première porte d'entrée des hacks WordPress : un plugin populaire mal maintenu, une faille publique non patchée pendant 48 heures, et le site est compromis. Les rapports de Sucuri et Wordfence convergent : plus de 95% des compromissions WordPress passent par un plugin obsolète. La maintenance devient un travail récurrent — mises à jour core toutes les 2-3 semaines, mises à jour plugins quasi hebdomadaires, tests de régression à chaque déploiement.

Le coût caché s'accumule. Un site WordPress crédible en 2026 nécessite typiquement Yoast Premium (99 USD/an), WP Rocket (59 USD/an), Advanced Custom Fields Pro (49 USD/an), Elementor Pro (99 USD/an), parfois un constructeur de pages additionnel et un thème premium. Le total grimpe à 400-600 CHF/an de licences récurrentes, avant l'hébergement managé et la maintenance. Au-delà de 4-5 ans, la dette technique d'un site WordPress devient ingérable : versions PHP obsolètes, plugins abandonnés, thème custom dont l'auteur a disparu, base de données polluée par des années de meta orphelines.

Next.js inverse l'équation. Performance native : LCP sous 1.5s par défaut grâce au composant Image, font optimization automatique, code splitting par route, streaming server components. Sécurité par défaut : zéro surface d'attaque plugin, pas d'admin web exposé, code TypeScript audité dans Git. Maintenance prévisible : un upgrade Next.js majeur tous les 6-9 mois, géré comme un PR classique avec tests automatisés. Le coût initial est plus élevé (8-15k CHF contre 5-8k pour un WordPress sur thème), mais le coût total sur 5-10 ans est nettement inférieur — pas de licences récurrentes, maintenance maîtrisée, perf qui ne se dégrade pas avec le temps.

Architecture JAMstack et headless CMS

L'architecture JAMstack repose sur une séparation stricte entre trois couches. Le content layer héberge les contenus structurés (Sanity, Contentful, Payload, Strapi selon le projet). Le presentation layer en Next.js consomme ces contenus à la build, à l'ISR ou à la requête, et rend des pages statiques distribuées via CDN. Le data layer optionnel (Postgres, REST/GraphQL externes, services tiers) gère les données dynamiques quand elles existent — formulaires, recherche, commerce. Cette séparation permet de remplacer indépendamment chaque couche : changer de CMS sans toucher au front, refondre le front sans migrer le contenu, plugger un nouveau service sans réécrire l'infrastructure.

Les avantages opérationnels sont concrets. Preview live permet aux rédacteurs de voir le rendu Next.js exact avant publication, sans déploiement. Le branching de contenu (versions draft, dates de publication planifiées, scheduled releases dans Sanity) sépare proprement le travail éditorial des mises en production. Le versionning git-style sur le contenu — Sanity et Payload exposent l'historique complet d'un document — permet de rollback une modification erronée en deux clics. La scalabilité est gratuite : pages servies depuis l'edge cache CDN mondial, invalidation fine par tag ou par chemin, ISR qui régénère uniquement les pages modifiées.

Les inconvénients existent et nous les exposons honnêtement. La courbe d'apprentissage CMS pour les rédacteurs est réelle mais négligeable avec un Sanity Studio bien configuré (champs documentés, validations claires, preview live). Les coûts de licence ne sont pas nuls : Sanity reste gratuit jusqu'à 3 utilisateurs et 100k requêtes API/mois, puis facture environ 15 USD/utilisateur supplémentaire ; Contentful démarre gratuit en small tier puis passe à environ 290 USD/mois sur le plan team, ce qui devient lourd au-delà de quelques sites. Notre default est Sanity pour la flexibilité maximale du Content Lake et du Studio personnalisable, ou Payload CMS quand le client veut un CMS self-hosted sur Postgres avec l'admin et les données dans son propre cloud.

Performance : Lighthouse 95+ par défaut

Atteindre un score Lighthouse 95+ n'est pas un exploit ponctuel, c'est l'état par défaut d'un site Next.js correctement architecturé. Le composant next/image gère automatiquement la conversion AVIF/WebP, la génération des tailles responsives, le lazy loading natif et la prévention du CLS via dimensions explicites. Le composant next/font subset les polices au glyphes utilisés, gère le swap pour éviter le FOIT (Flash of Invisible Text) et préchargent les fichiers WOFF2 critiques. Le code splitting par route est gratuit : seul le JavaScript nécessaire à la page courante est livré.

Pour les pages éditoriales ou produit, l'ISR (Incremental Static Regeneration) régénère les pages au fil des modifications CMS sans rebuild complet. Le edge cache Vercel ou Cloudflare distribue les pages depuis 200+ points de présence mondiaux, avec une latence sub-50ms en Europe. Les pages dynamiques (recherche, filtre, personnalisation légère) tournent sur l'edge runtime, qui démarre en millisecondes au lieu des centaines de millisecondes d'un serverless function classique.

Les métriques cibles 2026 que nous garantissons sur chaque livraison : LCP sous 1.5s sur 4G mobile, CLS strictement à 0 sur toutes les pages, INP sous 200ms (la métrique INP a remplacé FID dans les Core Web Vitals depuis mars 2024). Sur un site WordPress moyen — même optimisé avec WP Rocket et un thème léger — les scores Lighthouse performance plafonnent typiquement entre 60 et 70 en mobile. Un site Next.js correctement construit atteint 95-100. L'impact SEO est direct : Google priorise les Core Web Vitals depuis la Page Experience update de 2021, et les écarts de classement sur des requêtes concurrentielles tournent autour de 5-15% en faveur des sites rapides.

• Image optimization automatique (AVIF / WebP / responsive sizes)
• Font optimization avec next/font (préchargement, subsetting, swap)
• Code splitting par route, JavaScript livré au strict nécessaire
• ISR pour le contenu CMS, régénération sans rebuild complet
• Edge runtime pour les pages dynamiques rapides en sub-50ms
• Bundle size monitoring en CI, alertes sur régression

SEO technique avancé

Le SEO technique d'un site Next.js dépasse largement ce que propose un thème WordPress avec Yoast. Les données structurées Schema.org sont intégrées en JSON-LD natif via la Metadata API : Organization sur la home, Article sur les contenus éditoriaux, BreadcrumbList sur toutes les pages internes, FAQ sur les pages avec questions, Product sur les fiches commerce, Service sur les pages métier. Chaque type est typé en TypeScript, ce qui évite les erreurs silencieuses détectées uniquement par Search Console après indexation.

Le sitemap XML est généré dynamiquement par une route `sitemap.ts` qui interroge le CMS au build (ou en ISR) pour produire la liste à jour de toutes les URL canoniques. Le robots.txt suit le même pattern via `robots.ts`, avec des règles fines par environnement (production indexable, staging bloqué). Les metadata dynamiques par page — title, description, canonical, Open Graph, Twitter card, alternates de langues — sont générées via la fonction `generateMetadata` qui consomme le CMS. Les hreflang sont gérés proprement pour les sites multilingues, typiquement FR-DE-EN-IT en contexte suisse, avec les variantes régionales adéquates (fr-CH, de-CH).

Les Open Graph images peuvent être générées dynamiquement par page via `next/og` (ImageResponse), ce qui garantit une carte sociale optimisée pour chaque article ou page produit, sans intervention manuelle des éditeurs. Les URL slugs sont en kebab-case par convention, et les redirects 301 depuis l'ancien site sont maintenus dans `next.config.ts` ou via une table de migration côté CMS. Cette rigueur sur la canonisation et les redirects préserve le link equity accumulé pendant la migration.

CMS pour les content teams (sans dev)

Un CMS headless n'a d'intérêt que si l'équipe content peut l'utiliser sans solliciter un développeur. Notre approche par défaut consiste à customiser Sanity Studio selon les types de contenus du site — page, article, équipe, projet, service, témoignage — avec des schémas typés en TypeScript. Chaque type de document expose les champs strictement nécessaires, avec des libellés clairs en français et des descriptions d'usage. Pas de champs orphelins, pas de configuration cachée, pas de jargon technique exposé aux rédacteurs.

La preview live est branchée systématiquement : modifier le contenu dans le panneau gauche du Studio fait apparaître le rendu Next.js exact dans le panneau droit, avant publication. Le role-based access (admin / éditeur / contributeur) sépare les permissions selon les profils — un contributeur propose, un éditeur valide, un admin gère la structure. Les validations côté CMS (champs requis, longueur min/max sur les titres et meta description, formats de slug, contraintes d'image) attrapent les erreurs avant publication. Le draft / publish workflow avec planification permet de préparer un calendrier éditorial sans bricolage.

Le bilinguisme natif (FR-DE-EN, parfois IT) est géré via un toggle dans le Studio, avec des fallbacks explicites quand une traduction manque. La media library inclut hot-spot et crop pour produire des cadrages cohérents sur tous les formats. Les références entre documents (un article référence un auteur qui appartient à une équipe) sont typées et navigables. Nous formons votre équipe content sur Sanity Studio pendant 1 à 2 sessions de 90 minutes — assez pour rendre l'équipe autonome sur les modifications quotidiennes, avec un cheat sheet PDF documentant les cas particuliers.

Intégrations API et services tiers

Les sites éditoriaux et marketing modernes branchent rapidement plusieurs services tiers. Pour les newsletters, nous intégrons Brevo (ex-Sendinblue, ergonomique pour les équipes francophones), Resend (DX moderne, parfait pour les flux transactionnels) ou Mailchimp via API quand le client a déjà un historique. Les formulaires de contact passent par Resend côté serveur pour l'envoi de mail, avec validation des inputs via Zod, escapeHtml systématique pour prévenir les injections XSS, et rate limiting sur l'endpoint pour bloquer les bots.

Côté analytics, nous recommandons Plausible ou Umami pour les sites RGPD-friendly self-hosted ou en SaaS européen — pas de bandeau cookie obligatoire, pas de tracking cross-site, données stockées en UE. GA4 reste possible quand le client a des contraintes marketing existantes (Google Ads, intégrations Looker Studio), avec consent mode v2 branché correctement. Pour le commerce léger, Shopify Storefront API permet un front Next.js custom pilotant un back Shopify (catalogue, panier, checkout sur Shopify), ou Stripe Checkout pour des paiements ponctuels (cours en ligne, donations, événements).

Les autres intégrations courantes : Algolia ou MeiliSearch pour la recherche instantanée avec autocomplete, Cal.com (open source, RGPD-friendly) ou Calendly pour les réservations embarquées, Mapbox ou Google Maps selon le styling et le volume d'usage projeté. Chaque intégration est branchée avec ses webhooks, sa gestion d'erreur et son monitoring — pas de copier-coller de snippets non maintenus.

Quand choisir une agence vs un studio dev

Le marché du site web en Suisse romande propose plusieurs formats distincts, chacun adapté à un type de besoin. Les agences WordPress et solutions no-code (Webflow, Framer) couvrent bien les sites marketing simples et les MVP éditoriaux légers, avec un budget initial accessible. Les limites apparaissent quand le projet demande des intégrations custom, du multilingue avancé, de la logique métier dans les formulaires, ou une performance fine — la dette technique et le lock-in plateforme deviennent alors un coût caché significatif.

Les agences créatives suisses haut de gamme ont leurs forces : design impeccable, travail typographique soigné, direction artistique senior, équipes pluridisciplinaires (designer, directeur artistique, chef de projet, développeur senior, QA dédié). Pour un grand compte avec exigences de gouvernance, un projet à forte exposition publique, ou une marque qui veut un format d'art direction très poussé, le modèle reste pertinent.

Un studio dev comme fastdigital a un format différent : équipe restreinte (1 développeur full-stack, parfois un designer partenaire), stack moderne (Next.js 15, Sanity, Vercel), décisions techniques rapides. Pour un site vitrine d'indépendant à 1 500 CHF, un site éditorial de PME à 8 — 15k, ou un site marketing technique de startup, le format est souvent mieux adapté au besoin réel.

Le résultat technique est équivalent côté code : Lighthouse 95+, SEO solide, code maintenable dans cinq ans. Format différent, coût plus accessible, qualité comparable.

Cas d'usage typiques chez nos clients

Premier cas : les sites éditoriaux pour studios créatifs, agences, restaurants haut de gamme et marques exigeantes. Stack Sanity + Next.js, accent sur la typographie (next/font avec polices custom), les animations soignées (Framer Motion, Lenis pour le smooth scroll) et la perf irréprochable. Le contenu est dense, la mise en page exige de la précision, et le résultat doit refléter le niveau de la marque. Le sweet spot budgétaire est 10 à 20k CHF selon la complexité du design.

Deuxième cas : les vitrines tech pour SaaS et startups en seed/série A. Landing pages convertissantes avec hero clair, social proof, tarification, blog technique pour le content marketing, intégrations marketing automation (HubSpot, Customer.io, Brevo) branchées proprement. Performance et SEO sont des prérequis pour les requêtes longues traîne sur des mots-clés produit. Sweet spot 8 à 15k CHF.

Troisième cas : l'e-commerce headless pour marques émergentes et DNVB. Front Next.js custom piloté par Shopify Storefront ou Stripe selon le scope, performance Lighthouse 95+ sur les pages produit, SEO produit structuré (Schema.org Product, breadcrumbs, FAQ produit), animations sur les pages d'accueil et catégories. Les marques qui sortent du template Shopify standard pour un site qui reflète leur niveau de finition. Sweet spot 12 à 25k CHF.

FAQ technique