Création de modèles de démarrage réutilisables pour Next.js afin d’éviter le code générique

Tout développeur qui a travaillé avec Next.js a vécu ce rituel exact.

Vous tapez :

npx create-next-app

…et soudain vous vous retrouvez à contempler cette page d’accueil énorme et brillante de Vercel.

C’est fantastique : elle est propre, moderne et visiblement conçue pour impressionner.

Le problème, c’est que dès que vous êtes prêt à créer quelque chose de réel, cette même page d’accueil devient la première chose que vous supprimez. Pendant près de deux ans, une séquence familière s’est reproduite à chaque fois qu’un nouveau projet commençait :

• supprimer la page d’accueil
• supprimer les composants de exemple
• supprimer le style de exemple
• supprimer les routes API de exemple
• supprimer les polices de exemple
• supprimer le layout de exemple
• supprimer les métadonnées de exemple

Encore et encore, projet après projet.

À un moment donné, répéter cette tâche fastidieuse a cessé de paraître raisonnable.

C’est cette frustration qui a conduit à la création d’un modèle de départ personnel.

Ce qui a commencé par un seul préreglage léger est progressivement devenu deux, puis trois, et se transforme maintenant en une petite collection de points de départ pour Next.js, propres et à jour.

Voici comment cette évolution s’est produite.

Le véritable problème : un démarrage spectaculaire, pas minimal

Next.js est en soi excellent, mais son squelette par défaut a été conçu pour démontrer ses capacités, et non pour vous fournir une toile blanche sur laquelle construire.

Déjà prêt à l’emploi, vous obtenez :

• une page d’accueil de style marketing complète
• des effets d’animation
• des arrière-plans en dégradé
• des routes de exemple
• des composants de exemple
• des styles de exemple
• des métadonnées de exemple
• des polices de caractères de exemple

C’est vraiment utile si vous êtes nouveau avec ce framework. Mais si vous savez déjà ce que vous faites et que vous souhaitez simplement un point de départ minimal, cela devient un obstacle.

L’objectif était bien plus simple :

• Aucun bruit visuel supplémentaire
• Aucune interface de démonstration
• Aucunes routes temporaires
• Aucun fichier inutile
• Une base véritablement vide, prête à être développée

C’est donc ce qui a été créé.

Premier préréglage : Le point de départ minimal

C’était la première tentative.

Un point de départ compact et moderne pour Next.js comprenant :

• les versions actuelles des dépendances
• l’intégration de TailwindCSS
• TypeScript 6.0.3 (une version stable)
• la structure de dossiers standard du App Router
• Aucun composant de démonstration du tout
• Aucun élément superflu sur la page d’accueil à supprimer

Cela correspondait exactement aux besoins pour l’installation quotidienne des projets.

Il est également devenu assez rapidement évident que d’autres développeurs rencontraient probablement le même problème.

Deuxième préréglage : un point de départ pour une vitrine en ligne

Avec le préréglage minimal en place, la prochaine nécessité était un modèle offrant une structure plus développée — adapté à :

• les pages de catalogue de produits
• les maquettes de vitrines en ligne
• les prototypes d’e-commerce
• les applications full-stack générales

Cela a conduit à un deuxième préréglage, comprenant :

• une interface propre
• un agencement en grille pour les produits
• une structure de filtrage de base
• des bases prêtes pour l’ajout d’une base de données et d’un système d’authentification
• des composants UI modernes
• la même version stable de TypeScript

Ce préréglage n’est pas conçu comme une solution complète d’e-commerce — il s’agit simplement d’une base solide pour commencer.

Troisième préréglage : un modèle de page d’accueil pour les produits

Vient ensuite une autre prise de conscience :

La plupart des développeurs préfèrent ne pas créer une page d’accueil à partir de zéro à chaque fois.

Ainsi, un troisième préréglage a été ajouté, offrant :

• une section d’accroche propre
• un espace pour mettre en avant le produit
• un bloc d’appel à l’action
• un layout responsive
• une configuration minimale requise
• une personnalisation simple

Celui-ci convient particulièrement à :

• les produits SaaS
• les pages de lancement
• les sites marketing
• les présentations de projets simples

À ce stade, il y avait trois préréglages, chacun répondant à un besoin pratique distinct.

Pourquoi TypeScript 6.0.3 a été choisi comme standard

Next.js 16 a atteint une version stable, mais TypeScript 7 n’a pas encore pleinement été adopté dans l’ensemble de l’écosystème.

Des détails tels que les décorateurs, le comportement d’émission et la résolution des modules sont encore en cours de mise au point dans divers outils.

Compte tenu de cela, une directive simple a été établie :

Tous les préréglages utilisent TypeScript 6.0.3, une version stable de TS6, jusqu’à ce que Vercel confirme une compatibilité totale avec TypeScript 7.

Cette décision permet aux préréglages de rester prévisibles, fiables et accessibles pour les nouveaux venus.

Un résultat inattendu : un écosystème en croissance

Il n’y a jamais eu l’intention de créer toute une famille de modèles, de gérer plusieurs starters en même temps ou d’écrire de la documentation pour l’un d’eux.

Mais une fois qu’ils ont été créés :

• un starter minimal
• un starter pour boutique en ligne
• un starter pour page d’accueil

…il est devenu évident que cela s’était transformé en quelque chose de plus substantiel.

C’est précisément le type de ressource qui aurait été utile bien plus tôt.

À l’avenir

Le plan est d’en continuer à développer progressivement, avec des idées telles que :

• une documentation améliorée
• des déploiements de démonstration en direct
• des préréglages supplémentaires
• éventuellement un outil CLI
• éventuellement une soumission sur un marché de modèles

Rien de tout cela n’est urgent — juste des progrès progressifs au fil du temps.

Conclusions

Tout cela n’a pas commencé dans le but de devenir un mainteneur de modèles. Cela a simplement commencé parce que supprimer sans cesse la même page d’accueil de Vercel devenait fastidieux. Souvent, les outils les plus utiles naissent de la résolution de nos propres problèmes récurrents.

Si vous êtes un développeur Next.js à la recherche de :

• une structure de projet propre
• des dépendances à jour

une configuration stable de TypeScript

un minimum d’éléments superflus

une manière rapide de commencer

Ces préférences pourraient vous faire gagner autant de temps qu’elles en ont déjà économisé lors de leur création.

https://github.com/vedanshshetti/nextjs-preset

Lectures complémentaires

• Construire une page détail de film résiliente avec Next.js App Router — Apprenez à récupérer et à mettre en cache correctement les données de l’API OMDB dans Next.js App Router en utilisant des composants serveur asynchrones, des paramètres attendus et un traitement réel des erreurs 404.
• Leçons tirées du déploiement d’un SaaS Next.js et de la création d’une CLI de squelette — Explique les décisions fondamentales : choix du stack, authentification, multi-locataires, facturation et gestion de l’état — ainsi que la création d’une CLI qui simplifie la configuration des projets Next.js.
• Mise en place de Prisma 7 dans un projet Next.js 16 TypeScript — Apprenez à installer, configurer et migrer Prisma 7 avec PostgreSQL dans une application Next.js 16, puis à créer un client singleton pour éviter les fuites de connexions.