Erstellung wiederverwendbarer Next.js-Starter-Vorlagen, um Boilerplate-Code zu vermeiden.

Jeder Entwickler, der bereits mit Next.js gearbeitet hat, hat dieses genaue Ritual durchgemacht.

Man tippt:

npx create-next-app

…und plötzlich starrt man auf diese riesige, glänzende Landing-Page von Vercel.

Sie sieht fantastisch aus – sauber, modern und offensichtlich dazu da, Eindruck zu machen.

Das Problem ist: Sobald man bereit ist, etwas Eigenes zu entwickeln, wird genau diese Landing-Page das Erste, was man entfernt. Fast zwei Jahre lang wiederholte sich jedes Mal bei einem neuen Projekt dieselbe Abfolge:

• Die Landing-Page entfernen
• Die Beispielkomponenten entfernen
• Die Beispielfarben und -stile entfernen
• Die Beispiel-API-Wege entfernen
• Die Beispielschriften entfernen
• Das Beispielmusterlayout entfernen
• Die Beispielmetadaten entfernen

Immer wieder, Projekt für Projekt.

Irgendwann schien es nicht mehr vernünftig, diese Aufgabe immer wieder zu erledigen.

Genau diese Frustration führte dazu, dass ich stattdessen ein persönliches Starter-Template entwickelte.

Was ursprünglich als ein einzelnes, leichtes Vorlagenpaket begann, entwickelte sich schließlich zu zwei, dann zu drei Elementen und wird nun zu einer kleinen Sammlung sauberer, aktueller Next.js-Startpunkte.

So verlief diese Entwicklung.

Das eigentliche Problem: Ein auffälliger Start, nicht einer im Minimalstil

Next.js an sich ist hervorragend, doch sein Standard-Template dient dazu, Funktionen zu demonstrieren, und nicht dazu, Ihnen eine leere Grundlage zum Aufbauen zu bieten.

Von Anfang an erhalten Sie:

• eine vollständige Landing-Page im Marketing-Stil
• Animationseffekte
• Gradienten-Hintergründe
• Beispiellayouts
• Beispiele für Komponenten
• Beispiels Styles
• Beispielmetadaten
• Beispielschriften

Das ist wirklich nützlich, wenn man mit dem Framework neu ist. Doch wenn man bereits weiß, was man tut, und nur einen einfachen Ausgangspunkt möchte, stört es eher.

Das Ziel war etwas viel Einfacheres:

• kein zusätzlicher visueller Lärm
• keine Demo-Oberfläche
• keine Platzhalter-Routen
• keine Dateien, die man nicht benötigt
• eine wirklich leere, sofort nutzbare Basis

Deshalb wurde genau das erstellt.

Erste Vorlage: Der minimalistische Starter

Das war der ursprüngliche Versuch.

Ein kompakter, moderner Next.js-Starter mit folgenden Eigenschaften:

• aktuelle Versionen der Abhängigkeiten
• Integration von TailwindCSS
• TypeScript 6.0.3 (eine stabile Version)
• die standardmäßige Ordnerstruktur des App Router
• keine Demo-Komponenten überhaupt
• kein unnötiger Kram auf der Startseite, den man entfernen müsste

Er entsprach genau dem, was für die tägliche Projekt-Einrichtung wirklich benötigt wurde.

Schnell wurde auch klar, dass andere Entwickler wahrscheinlich mit demselben Problem zu kämpfen hatten.

Zweite Vorlage: Ein Ausgangspunkt für eine Online-Shop-Präsentation

Nachdem die minimale Vorlage eingerichtet war, wurde ein Setup mit etwas mehr Struktur gewünscht – geeignet für:

• Produktkatalogseiten
• Layouts für Online-Shops
• E-Commerce-Prototypen
• Allgemeine Full-Stack-Anwendungen

Daraus entstand eine zweite Vorlage, die folgende Elemente enthält:

• eine saubere Benutzeroberfläche
• einen Produktraster-Layout
• eine grundlegende Filterstruktur
• Grundlagen für die Hinzufügung einer Datenbank und Authentifizierung
• moderne UI-Komponenten
• dieselbe stabile TypeScript-Version

Es handelt sich dabei nicht um eine vollständige E-Commerce-Lösung – lediglich um eine solide Ausgangsbasis.

Dritte Vorlage: Ein Template für eine Produkt-Landing-Page

Dann kam eine weitere Erkenntnis:

Die meisten Entwickler möchten nicht jedes Mal eine Landing Page von Grund auf erstellen.

Daher folgte ein drittes Voreinstellungspaket, das Folgendes bot:

• eine saubere Hero-Seite
• einen Platz zur Hervorhebung des Produkts
• einen Call-to-Action-Block
• eine responsive Gestaltung
• minimale Einrichtung erforderlich
• einfache Anpassbarkeit

Es eignet sich besonders gut für:

• SaaS-Produkte
• Launch-Seiten
• Marketingseiten
• einfache Projektpräsentationen

Zu diesem Zeitpunkt gab es drei Voreinstellungen, von denen jede ein unterschiedliches praktisches Bedürfnis abdeckte.

Warum TypeScript 6.0.3 als Standard gewählt wurde

Next.js 16 hat eine stabile Version erreicht, doch TypeScript 7 hat sich im gesamten Ökosystem noch nicht vollständig durchgesetzt.

Details wie Dekoratoren, das Emission-Verhalten und die Modulauflösung werden in verschiedenen Tools noch weiter ausgearbeitet.

Angesichts dessen wurde eine einfache Richtlinie festgelegt:

Jeder Vorlage-Set verwendet TypeScript 6.0.3, eine stabile TS6-Version, bis Vercel vollständige Kompatibilität mit TypeScript 7 bestätigt.

Diese Entscheidung sorgt dafür, dass die Vorlage-Sete vorhersehbar, zuverlässig und für Anfänger zugänglich bleiben.

Ein unerwartetes Ergebnis: Ein wachsendes Ökosystem

Es bestand nie die Absicht, eine ganze Familie von Vorlagen zu entwickeln, mehrere Starter gleichzeitig zu pflegen oder Dokumentation dafür zu schreiben.

Aber sobald es folgende gab:

• einen minimalen Starter
• einen Storefront-Starterset
• einen Landing-Page-Starterset

…wurde deutlich, dass sich daraus etwas Größeres entwickelt hatte.

Ein kleines Ökosystem aus modernen, unüberladenen Next.js-Startpunkten hatte bereits Form angenommen.

Ganz genau die Art von Ressource, die schon viel früher nützlich gewesen wäre.

Ausblick

Der Plan ist, dies schrittweise weiter auszubauen, unter anderem mit Ideen wie:

• bessere Dokumentation
• Live-Demo-Deploymente
• Weitere Vorlagen
• möglicherweise ein CLI-Tool
• möglicherweise Einreichung auf einem Template-Marktplatz

Nichts davon ist dringend – nur schrittweiser Fortschritt im Laufe der Zeit.

Fazit

Alles begann nicht mit dem Ziel, Template-Administrator zu werden. Es fing einfach damit an, dass das ständige Löschen derselben Vercel-Landingpage langweilig wurde. Oft entstehen die nützlichsten Tools aus der Beseitigung eigener wiederkehrender Probleme.

Falls Sie ein Next.js-Entwickler sind, der nach folgendem sucht:

• einer sauberen Projektstruktur
• aktuellen Abhängigkeiten

eine stabile TypeScript-Einrichtung

minimaler Overhead

eine schnelle Möglichkeit zum Starten

Diese Vorlagen können Ihnen genauso viel Zeit sparen wie bereits bei ihrer Erstellung.

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

Zusätzliche Literatur

• Erstellung einer widerstandsfähigen Film-Detailseite mit Next.js App Router — Lernen Sie, wie man Daten der OMDB API in Next.js App Router mithilfe von asynchronen Server Components, awaited Parametern und einer echten 404-Behandlung korrekt abruft und speichert.
• Lektionen aus dem Vertrieb eines Next.js SaaS-Produkts und der Erstellung einer Scaffolding CLI — Erklärt die grundlegenden Entscheidungen bezüglich der Technologiestack-Wahl, Authentifizierung, Multi-Tenancy, Abrechnung und Zustandsverwaltung – sowie die Erstellung einer CLI, die die Einrichtung von Next.js-Projekten vereinfacht.
• Einführung von Prisma 7 in einem Next.js 16 TypeScript-Projekt — Lernen Sie, wie man Prisma 7 mit PostgreSQL in einer Next.js 16-Anwendung installiert, konfiguriert und migriert, sowie wie man einen Singleton-Client erstellt, um Verbindungslecks zu vermeiden.