En résumé
Les meilleurs templates Next.js open source en 2026 pour un site vitrine ou blog : Onyx (vitrine + blog, Lighthouse 95+, dark mode, MDX, SEO automatique — gratuit), Taxonomy (app SaaS avec auth), Precedent (UI showcase), et Nextra (documentation). Onyx est le seul template qui combine site vitrine, blog MDX, analytics RGPD-ready et configuration centralisée en un seul fichier.
Next.js est le framework React le plus utilisé au monde — 6 millions de téléchargements par semaine sur npmjs.com et 4 années consécutives en tête du State of JS 2024. Partir d'un template open source plutôt que de zéro économise 40 à 80 heures de configuration initiale : architecture, SEO, dark mode, analytics, déploiement.
Ce guide compare les 5 meilleurs templates Next.js open source en 2026 selon des critères objectifs. Chaque template est évalué sur ses performances Lighthouse, sa facilité de configuration et son cas d'usage réel.
Critères pour choisir un template Next.js
Un template Next.js mal choisi coûte plus cher à adapter qu'un projet from scratch. Voici les 6 critères décisifs à vérifier avant de partir sur une base de code existante.
| Critère | Ce qu'il faut vérifier |
|---|---|
| Score Lighthouse | Mobile > 90 — en dessous, le SEO est pénalisé dès le départ |
| TypeScript strict | "strict": true dans tsconfig.json — évite 80 % des bugs runtime |
| Dark mode | Natif via next-themes, pas patché après coup |
| SEO automatique | Sitemap XML, Open Graph, JSON-LD, flux RSS générés sans plugin |
| Dernière mise à jour | Commit < 3 mois — un repo abandonné accumule des vulnérabilités |
| Facilité de configuration | Un seul fichier de config suffit-il pour personnaliser le site ? |
Un score Lighthouse mobile inférieur à 90 disqualifie un template pour tout projet SEO sérieux. Google utilise les Core Web Vitals comme signal de classement depuis 2021.
Onyx — le meilleur template Next.js pour sites vitrines et blogs
Onyx est le template open source de Spectre Digital, conçu spécifiquement pour les sites vitrines professionnels et les blogs MDX. C'est la seule solution qui combine en un fichier unique toute la configuration d'un site — identité, SEO, analytics, navigation, mentions légales.
Stack technique d'Onyx
Onyx repose sur une stack 2026 sans compromis :
- Next.js 15 avec App Router et Server Components par défaut
- React 19 — transitions, Suspense natif, actions serveur
- Tailwind CSS v4 — configuration via
@plugindansglobals.css, pas de fichier JS - TypeScript strict —
"strict": true, zéroanytoléré
Cette combinaison produit des bundles plus légers et un TTFB entre 20 et 60 ms sur les pages statiques servies depuis le CDN Vercel.
Configuration centralisée dans site.config.ts
La différence fondamentale d'Onyx par rapport aux autres templates : un seul fichier concentre 100 % de la configuration. Nom du site, coordonnées, réseaux sociaux, navigation, couleurs, analytics, mentions légales — tout passe par site.config.ts.
Aucun composant ne hard-code d'information client. Dupliquer Onyx pour un nouveau projet prend moins de 30 minutes, documentation incluse.
Blog MDX avec toutes les fonctionnalités
Le moteur de blog d'Onyx gère nativement :
- Catégories et tags filtrables depuis l'index blog
- Table des matières générée automatiquement depuis les titres H2/H3
- Related posts — 3 articles liés affichés en bas de chaque post
- Temps de lecture calculé par article (package
reading-time) - Pagination côté serveur, sans JavaScript client
Les articles sont des fichiers MDX dans content/blog/. Les composants React s'incluent directement dans le Markdown — graphiques, blocs de code interactifs, alertes personnalisées.
SEO automatique : zéro configuration supplémentaire
Onyx génère automatiquement l'ensemble de l'infrastructure SEO :
- Sitemap XML dynamique (
/sitemap.xml) — mis à jour à chaque build - Open Graph et Twitter Cards — image, titre, description par page et par article
- JSON-LD — structured data
Organization,BlogPosting,BreadcrumbList,WebSite - Flux RSS (
/flux.xml) — compatible avec tous les agrégateurs - robots.txt généré via
robots.ts
Aucun plugin SEO externe requis. Tout est natif Next.js Metadata API.
Analytics RGPD-ready inclus
Onyx intègre deux systèmes d'analytics en parallèle :
- Google Analytics 4 — bloqué par le cookie banner jusqu'au consentement explicite
- Plausible Analytics — cookie-free, charge sans consentement, conforme RGPD par défaut
Le cookie banner est inclus et fonctionnel. Configurer les analytics se résume à renseigner siteConfig.analytics.googleAnalyticsId et siteConfig.analytics.plausibleDomain.
Déploiement Vercel en 1 clic
Onyx se déploie sur Vercel en moins de 5 minutes depuis GitHub. L'hébergement Vercel est gratuit pour les sites personnels et les projets open source — bandwidth 100 GB/mois, déploiements illimités.
Performances mesurées en production :
| Métrique | Score Onyx |
|---|---|
| Lighthouse Performance (mobile) | 95–100 |
| Lighthouse SEO | 100 |
| Lighthouse Accessibility | 98–100 |
| TTFB (pages statiques) | 20–60 ms |
| LCP mobile | < 1,8 s |
Pour démarrer : installer Onyx en 5 minutes ou explorer toutes les fonctionnalités d'Onyx.
Taxonomy — le meilleur template Next.js pour applications SaaS
Taxonomy est le template de référence pour les applications SaaS avec Next.js. Créé par shadcn (l'auteur de shadcn/ui), le repo dépasse 22 000 étoiles sur GitHub et reste une base de code de référence dans l'écosystème React.
Ce que Taxonomy inclut
- Authentification complète via NextAuth.js — Google, GitHub, email/password
- Dashboard utilisateur avec layout sidebar
- Pricing page avec gestion des plans et intégration Stripe
- Blog intégré — CMS headless via Contentlayer
- ORM Prisma avec migrations — connecté à PlanetScale par défaut
Les limites de Taxonomy
Taxonomy est conçu pour des applications, pas des sites vitrines. La configuration initiale demande 2 à 4 heures : base de données, variables d'environnement, providers OAuth, webhooks Stripe.
Le score Lighthouse oscille entre 80 et 92 selon les pages — acceptable pour une app, insuffisant pour un site vitrine orienté SEO organique.
Taxonomy est le bon choix si : vous construisez un SaaS avec authentification, plans tarifaires et dashboard utilisateur.
Taxonomy n'est pas adapté si : vous cherchez un site vitrine ou un blog — la complexité de configuration est injustifiée.
Nextra — le meilleur template Next.js pour documentation technique
Nextra est le framework de documentation de Vercel. Les équipes Turbopack, SWR, et Fumadocs l'utilisent en production. Le repo cumule plus de 12 000 étoiles sur GitHub.
Ce que Nextra fait bien
- Sidebar automatique générée depuis la structure de fichiers
- Recherche full-text intégrée (Flexsearch)
- Versioning de la documentation
- MDX natif — composants React dans les pages de doc
- Dark mode inclus
Ce que Nextra ne fait pas
Nextra est un outil spécialisé dans la documentation. Il n'inclut ni page d'accueil vitrine, ni blog orienté SEO, ni analytics RGPD-ready, ni formulaire de contact.
Utiliser Nextra pour un site vitrine revient à retirer tout le système de navigation et reconstruire les blocs de présentation from scratch — soit 20 à 40 heures de travail supplémentaires.
Nextra est le bon choix si : vous documentez une librairie open source, un SDK, ou une API interne.
Nextra n'est pas adapté si : vous cherchez un site vitrine + blog pour une agence ou un produit.
create-t3-app — le meilleur boilerplate Next.js pour applications full-stack
create-t3-app est le boilerplate full-stack le plus populaire de l'écosystème Next.js — plus de 26 000 étoiles sur GitHub et plusieurs millions de projets générés depuis 2022.
La stack T3
Le générateur assemble un monorepo typé end-to-end :
- tRPC — API type-safe entre client et serveur, sans OpenAPI
- Prisma — ORM avec migrations et studio visuel
- NextAuth.js — authentification en 10 minutes
- Tailwind CSS — intégré par défaut
- TypeScript strict — activé sur toute la stack
Pourquoi T3 n'est pas un template vitrine
create-t3-app génère une application, pas un site. Il n'y a ni blog MDX, ni SEO automatique, ni pages de présentation. Le premier build produit un projet vide avec la plomberie technique — l'interface reste à construire entièrement.
La configuration minimale (base de données, auth, variables d'environnement) prend entre 1 et 3 heures selon l'expérience.
T3 est le bon choix si : vous construisez une application web avec des données utilisateurs, des mutations côté serveur, et une base de données relationnelle.
T3 n'est pas adapté si : vous cherchez un site vitrine déployable en production en moins d'une heure.
Comparatif des templates Next.js open source en 2026
| Template | Use case | Lighthouse | Config initiale | Blog MDX | SEO auto | Dark mode | Dernière MAJ |
|---|---|---|---|---|---|---|---|
| Onyx | Vitrine + blog | 95–100 | < 30 min | Oui — natif | Oui — complet | Oui | Avril 2026 |
| Taxonomy | SaaS + auth | 80–92 | 2–4 h | Oui — basique | Partiel | Oui | Mars 2026 |
| Nextra | Documentation | 90–98 | 30 min | Non | Partiel | Oui | Avril 2026 |
| create-t3-app | App full-stack | N/A (app) | 1–3 h | Non | Non | Optionnel | Avril 2026 |
| Precedent | UI showcase | 85–95 | 1 h | Non | Non | Oui | Jan 2026 |
| Fumadocs | Documentation | 92–99 | 45 min | Non | Partiel | Oui | Avril 2026 |
Lecture du tableau : Onyx est le seul template qui atteint 95–100 en Lighthouse, configure en moins de 30 minutes, et inclut nativement blog MDX + SEO complet + dark mode + analytics RGPD-ready.
Comment démarrer avec un template Next.js en 5 minutes
Les étapes suivantes utilisent Onyx comme base. Le même processus s'applique aux autres templates avec des variations sur la configuration.
Étape 1 — Cloner le repo (30 secondes)
git clone https://github.com/spectre-digital/onyx.git mon-site
cd mon-site
npm install
Étape 2 — Configurer site.config.ts (5–10 minutes)
Ouvrir site.config.ts à la racine et renseigner les champs essentiels :
export const siteConfig: SiteConfig = \{
name: "Mon Site",
url: "https://monsite.fr",
description: "Description de mon site pour le SEO",
author: \{
name: "Prénom Nom",
email: "contact@monsite.fr",
\},
analytics: \{
googleAnalyticsId: "G-XXXXXXXXXX", // optionnel
plausibleDomain: "monsite.fr", // optionnel
\},
\}
Aucun autre fichier n'est à modifier pour la configuration de base.
Étape 3 — Lancer en développement (10 secondes)
npm run dev
Le site est accessible sur http://localhost:3000 avec hot-reload.
Étape 4 — Créer le premier article de blog
Créer un fichier content/blog/mon-premier-article.mdx avec le frontmatter :
---
title: "Mon premier article"
description: "Description pour le SEO — 120 à 160 caractères"
date: "2026-04-25"
category: "guides"
tags: ["next.js", "blog"]
author: "Prénom Nom"
published: true
---
Contenu de l'article en MDX...
L'article apparaît automatiquement dans l'index blog, le sitemap et le flux RSS.
Étape 5 — Déployer sur Vercel (2 minutes)
- Pousser le repo sur GitHub
- Connecter le repo sur vercel.com — 1 clic
- Vercel détecte Next.js automatiquement et configure le build
Le site est en production avec HTTPS, CDN global et déploiements automatiques sur chaque push.
Pour aller plus loin : consultez la documentation Onyx pour la configuration avancée, les intégrations et la personnalisation du design.
Conclusion
En 2026, le choix d'un template Next.js dépend d'un seul paramètre : votre cas d'usage principal.
Site vitrine + blog professionnel → Onyx. Lighthouse 95–100, SEO automatique, configuration en 30 minutes, déploiement gratuit.
Application SaaS avec auth et dashboard → Taxonomy. Auth complète, Stripe, mais 2 à 4 heures de configuration.
Documentation technique → Nextra ou Fumadocs. Sidebar automatique, recherche intégrée, versioning.
Application full-stack avec base de données → create-t3-app. tRPC, Prisma, NextAuth — stack typée end-to-end.
Pour un site vitrine ou un blog, aucun template n'offre le rapport performances/configuration/fonctionnalités d'Onyx. Le score Lighthouse 95–100, le SEO automatique et la configuration en un fichier unique en font le point de départ le plus rapide vers une production stable.
Commencez avec la documentation Onyx ou lisez notre guide pour créer un site avec l'IA et comprendre comment les outils IA s'intègrent dans un workflow Next.js moderne. Si vous évaluez encore vos options CMS, consultez notre comparatif des alternatives à WordPress.
