Wenn Sie nach einer modernen Blog-Startervorlage suchen, die mit Next.js erstellt wurde, ist das NextJS Base Blog- Projekt ein hervorragender Ausgangspunkt. Es handelt sich um eine voll ausgestattete Open-Source-Blog-Anwendung, die mit Next.js 15, React 19, TypeScript und Tailwind CSS 4 entwickelt wurde .
Das Projekt bietet eine saubere Architektur, eine moderne Benutzeroberfläche componentsund eine simulierte API-Schicht und ist damit ideal für Entwickler, die schnell einen Blog erstellen möchten, ohne ein Backend einrichten zu müssen.
GitHub-Repository: https://github.com/bfotool/nextjs-base-blog
Dieses Projekt ist besonders nützlich für:
Entwickler lernen die Next.js-App kennenRouter
Schnell einen Blog oder eine Content-Website erstellen
Erstellung eines Next.js-Boilerplate-Projekts
Entwicklung von UI-Funktionen vor der Anbindung einer echten Backend-API
Projektübersicht
NextJS Base Blog ist als produktionsreife Blogvorlage mit vielen gängigen Funktionen moderner Content-Websites konzipiert.
Das Projekt umfasst:
eine Homepage mit ausgewählten Beiträgen
Blogbeitragsseiten
Kategorienfilterung
Volltextsuche
Pagination
Inhaltsverzeichnis
ähnliche Beiträge
dunkles/helles Design
Einer der interessantesten Aspekte des Projekts ist die Fake-API-Schicht, die mithilfe von Axios-Interceptors eine REST-API simuliert. Dies ermöglicht es Entwicklern, die Anwendung zu erstellen und zu testen, ohne einen Backend-Server zu benötigen .
Hauptmerkmale
Startseite
Die Startseite enthält mehrere wichtige Abschnitte:
Hervorgehobener Heldenbeitrag
Kategoriefilter
eine Übersicht der Blogbeiträge
paginierte Navigation
Das Layout ist vollständig responsiv und sowohl für Desktop- als auch für Mobilgeräte optimiert.
Blogbeitragsseite
Jeder Artikel ist über einen dynamischen Pfad zugänglich:
/blog/[slug]
Die Blogbeitragsseite enthält mehrere nützliche Funktionen:
vollständiger Artikelinhalt
automatisches Inhaltsverzeichnis
geschätzte Lesezeit
Social-Media-Buttons
Vorschläge für ähnliche Beiträge
Diese Funktionen tragen zu einem professionellen Leseerlebnis bei, das modernen Blogging-Plattformen ähnelt.
Kategorieseiten
Nutzer können Beiträge nach Kategorien durchsuchen.
Beispielroute:
/blog/category/[slug]
Diese Funktion ermöglicht es den Lesern, Inhalte innerhalb bestimmter Themenbereiche zu erkunden.
Suchfunktion
Das Projekt beinhaltet eine integrierte Suchseite:
/search
Die Suche unterstützt:
Echtzeitergebnisse
entprellter Eingang
Suche in Titeln, Auszügen und Schlagwörtern
Dies verbessert die Benutzerfreundlichkeit und hilft Nutzern, relevante Inhalte schnell zu finden.
Über uns und Kontaktseiten
Das Projekt umfasst außerdem zusätzliche Seiten, wie sie üblicherweise auf professionellen Blogs zu finden sind.
Über uns-Seite
Die Seite „Über uns“ stellt Folgendes vor:
das Team
die Projektgeschichte
Kernwerte
Kontaktseite
Die Kontaktseite enthält ein vollständig validiertes Formular mit folgenden Angaben:
Formularvalidierung
Toast-Benachrichtigungen
Feedback zu Erfolg und Fehler
Unterstützung für den Dunkelmodus
Der Blog unterstützt sowohl den Dunkelmodus als auch den Hellmodus .
Zu den Merkmalen gehören:
automatische Systemthemenerkennung
manuelle Umschaltung
Themenpersistenz mittels localStorage
Fake-API-Schicht(Entwicklung ohne Backend)
Einer der interessantesten Aspekte dieses Projekts ist sein Fake-API-System .
Anstatt einen echten Server aufzurufen, verwendet die Anwendung Axios-Interceptors, um REST-API-Antworten zu simulieren.
So funktioniert die Fake-API
Die Axios-Instanz wird erstellt in:
src/services/api-client.ts
Wenn die Umgebungsvariable aktiviert ist:
NEXT_PUBLIC_USE_MOCK_API=true
Anfragen werden abgefangen, bevor sie das Netzwerk erreichen.
Mock-Handler liefern gefälschte Antworten mit realistischen Verzögerungen(200–600 ms).
Die Antworten verhalten sich wie echte API-Antworten.
Die simulierten Daten werden gespeichert in:
src/mocks/
Einschließlich:
Beispielbeiträge
Autoren
Kategorien
Verfügbare API-Endpunkte
Die Mock-API unterstützt mehrere Endpunkte:
| Verfahren | Endpunkt | Beschreibung |
|---|---|---|
| ERHALTEN | /Beiträge | Seitenweise Blogbeiträge |
| ERHALTEN | /posts/featured | Ausgewählte Beiträge |
| ERHALTEN | /posts/:slug | Einzelner Blogbeitrag |
| ERHALTEN | /Kategorien | Kategorienliste |
| ERHALTEN | /Autoren | Autorenliste |
| POST | /Kontakt | Kontaktformular absenden |
Technologie-Stack
Das Projekt verwendet einen modernen Frontend-Stack.
| Schicht | Technologie |
|---|---|
| Rahmen | Next.js 15 |
| UI-Bibliothek | React 19 |
| Sprache | Typoskript |
| Styling | Tailwind CSS 4 |
| HTTP-Client | Axios |
| Symbole | Lucide React |
| Linting | ESLint |
| Formatierung | Hübscher |
Dieser Stack bietet:
starke Typsicherheit
wartungsfähige Architektur
moderne Entwicklererfahrung
Projektstruktur
Die Projektstruktur folgt einer klaren und skalierbaren Architektur.
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
AppRouter
Das appVerzeichnis enthält alle Anwendungsrouten.
Beispiele:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
Dies entspricht der Next.js-App Router-Architektur, die in neueren Versionen von Next.js eingeführt wurde.
Komponenten
Die Benutzeroberfläche componentsist in logische Gruppen unterteilt:
components/layout
components/common
components/blog
Diese Struktur sorgt für einen übersichtlichen und leichter wartbaren UI-Code.
Dienstschicht
Der servicesOrdner enthält API-bezogene Logik:
API-Clientkonfiguration
Postdienst
Kategorie Service
Kontaktformular-Service
Diese Schicht trennt die Datenabruflogik von der Benutzeroberflächecomponents, was die Skalierbarkeit verbessert.
Installationsanleitung
Anforderungen
Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes haben:
Node.js 18 oder höher
npm, yarn oder pnpm
Repository klonen
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
Abhängigkeiten installieren
npm install
Umgebungsvariablen konfigurieren
cp .env.example .env
Starten Sie den Entwicklungsserver
npm run dev
Öffnen Sie Ihren Browser und besuchen Sie:
http://localhost:3000
Verfügbare Skripte
| Befehl | Beschreibung |
|---|---|
| npm run dev | Entwicklungsserver starten |
| npm run build | Produktionsbuild erstellen |
| npm run start | Produktionsserver starten |
| npm run lint | ESLint ausführen |
| npm run-Format | Code mit Prettier formatieren |
| npm run type-check | TypeScript-Prüfungen ausführen |
Umstellung auf eine echte API
Wenn Sie das Projekt mit einer realen Backend-API verbinden möchten, befolgen Sie diese Schritte.
Schritt 1: Mock-API deaktivieren
Bearbeiten Sie die .envDatei:
NEXT_PUBLIC_USE_MOCK_API=false
Schritt 2: API-Basis-URL festlegen
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
Schritt 3: Datentypen zuordnen
Stellen Sie sicher, dass Ihre Backend-API Daten zurückgibt, die den TypeScript-Definitionen in Folgendem entsprechen:
src/types/index.ts
Es sind keine weiteren Codeänderungen erforderlich.
Inhalte anpassen
Beispielinhalte können hier bearbeitet werden:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
Dies ermöglicht es Entwicklern, Demoinhalte schnell anzupassen.
Design und Benutzeroberfläche anpassen
Globales Styling finden Sie in:
src/app/globals.css
Für dieses Projekt werden folgende Schriftarten verwendet:
DM Sans
JetBrains Mono
Je nach Ihren Designanforderungen können Sie Stile anpassen oder Schriftarten ersetzen.
Abschluss
NextJS Base Blog ist eine leistungsstarke und moderne Startervorlage für den Aufbau eines Blogs mit Next.js.
Zu den wichtigsten Vorteilen des Projekts gehören:
moderner Technologie-Stack
saubere Architektur
Mock-API für die Entwicklung
einfache Integration mit realen Backend-APIs
responsive Benutzeroberfläche und moderne Funktionen
Wenn Sie einen Blog, eine Entwicklerwebsite oder eine Content-Plattform mit Next.js erstellen, kann Ihnen dieses Repository erhebliche Entwicklungszeit sparen.
Den Quellcode finden Sie hier: https://github.com/bfotool/nextjs-base-blog