close

NextJS Base Blog: Moderne blogstarter med Next.js 15 og Tailwind

Hvis du leder efter en moderne blogstarterskabelon bygget med Next.js, er NextJS Base Blog- projektet et glimrende udgangspunkt. Det er en fuldt udstyret open source-blogapplikation bygget med Next.js 15, React 19, TypeScript og Tailwind CSS 4 .

Projektet tilbyder en ren arkitektur, et moderne brugergrænseflade componentsog et mock API-lag, hvilket gør det ideelt for udviklere, der ønsker at opbygge en blog hurtigt uden at skulle sætte en backend op.

GitHub-arkivet: https://github.com/bfotool/nextjs-base-blog

Dette projekt er især nyttigt til:

  • Udviklere lærer Next.js-appenRouter

  • Hurtig opbygning af en blog eller et indholdswebsted

  • Oprettelse af et Next.js standardprojekt

  • Udvikling af UI-funktioner før tilslutning af et rigtigt backend-API

Projektoversigt

NextJS Base Blog er designet som en produktionsklar blogskabelon med mange almindelige funktioner, der findes på moderne indholdswebsteder.

Projektet omfatter:

  • en hjemmeside med fremhævede indlæg

  • sider med blogindlæg

  • kategorifiltrering

  • fuldtekstsøgning

  • paginering

  • indholdsfortegnelse

  • relaterede indlæg

  • mørkt/lyst tema

En af de mest interessante dele af projektet er Fake API Layer, som simulerer en REST API ved hjælp af Axios interceptorer. Dette giver udviklere mulighed for at bygge og teste applikationen uden behov for en backend-server .

Nøglefunktioner

Hjemmeside

Hjemmesiden viser flere vigtige sektioner:

  • fremhævet helteindlæg

  • kategorifiltre

  • et gitter af blogindlæg

  • pagineret navigation

Layoutet er fuldt responsivt og optimeret til både desktop- og mobile enheder.

Blogindlægsside

Hver artikel er tilgængelig via en dynamisk rute:

/blog/[slug]

Blogindlægssiden indeholder flere nyttige funktioner:

  • hele artiklens indhold

  • automatisk indholdsfortegnelse

  • anslået læsetid

  • knapper til sociale medier

  • forslag til relaterede indlæg

Disse funktioner er med til at skabe en professionel læseoplevelse, der minder om moderne blogplatforme.

Kategorisider

Brugere kan gennemse indlæg efter kategori.

Eksempelrute:

/blog/category/[slug]

Denne funktion giver læserne mulighed for at udforske indhold inden for bestemte emner.

Søgefunktionalitet

Projektet inkluderer en indbygget søgeside:

/search

Søgeunderstøttelser:

  • resultater i realtid

  • afbouncet input

  • søgning på tværs af titler, uddrag og tags

Dette forbedrer brugervenligheden og hjælper brugerne med hurtigt at finde relevant indhold.

Om og kontakt sider

Projektet inkluderer også yderligere sider, der almindeligvis findes på professionelle blogs.

Om siden

Om-siden introducerer:

  • holdet

  • projektets historie

  • kerneværdier

Kontaktside

Kontaktsiden indeholder en fuldt valideret formular med:

  • formularvalidering

  • toast-notifikationer

  • feedback på succes og fejl

Understøttelse af mørk tilstand

Bloggen understøtter mørk tilstand og lys tilstand .

Funktioner inkluderer:

  • automatisk systemtemadetektion

  • manuel skift

  • temapersistens ved hjælp af localStorage

Falsk API-lag(udvikling uden backend)

En af de mest interessante dele af dette projekt er dets falske API-system .

I stedet for at kalde en rigtig server bruger applikationen Axios-interceptorer til at simulere REST API-svar.

Sådan fungerer den falske API

  1. Axios-instansen oprettes i:

src/services/api-client.ts

  1. Når miljøvariablen er aktiveret:

NEXT_PUBLIC_USE_MOCK_API=true

  1. Anmodninger opfanges, før de når netværket.

  2. Mock-handlere returnerer falske svar med realistiske forsinkelser(200-600 ms).

  3. Svar opfører sig som rigtige API-svar.

Mock-dataene er gemt i:

src/mocks/

Inklusive:

  • eksempelindlæg

  • forfattere

  • kategorier

Tilgængelige API-slutpunkter

Mock API'en understøtter flere endpoints:

Metode Endepunkt Beskrivelse
FÅ /indlæg Paginerede blogindlæg
FÅ /indlæg/fremhævet Fremhævede indlæg
FÅ /indlæg/:snegl Enkelt blogindlæg
FÅ /kategorier Kategoriliste
FÅ /forfattere Forfatterliste
STOLPE /kontakte Send kontaktformular

Teknologistak

Projektet bruger en moderne frontend-stak.

Lag Teknologi
Ramme Next.js 15
UI-bibliotek Reager 19
Sprog TypeScript
Styling Medvind CSS 4
HTTP-klient Axios
Ikoner Lucide React
Fnug ESLint
Formatering Smukkere

Denne stak giver:

  • stærk type sikkerhed

  • vedligeholdelig arkitektur

  • moderne udvikleroplevelse

Projektstruktur

Projektstrukturen følger en ren og skalerbar arkitektur.

src/ 
├── app/ 
├── components/ 
├── services/ 
├── mocks/ 
├── contexts/ 
├── hooks/ 
├── types/ 
└── lib/

AppenRouter

Kataloget appindeholder alle applikationsruter.

Eksempler:

app/page.tsx 
app/blog/[slug]/page.tsx 
app/search/page.tsx

Dette følger Next.js App Router-arkitekturen, der blev introduceret i nyere versioner af Next.js.

Komponenter

Brugergrænsefladen componentser organiseret i logiske grupper:

components/layout 
components/common 
components/blog

Denne struktur holder brugergrænsefladekoden organiseret og nemmere at vedligeholde.

Servicelag

Mappen servicesindeholder API-relateret logik:

  • API-klientkonfiguration

  • posttjeneste

  • kategori service

  • kontaktformulartjeneste

Dette lag adskiller datahentningslogik fra brugergrænsefladencomponents, hvilket forbedrer skalerbarheden.

Installationsvejledning

Krav

Før du starter, skal du sørge for at have:

  • Node.js 18 eller nyere

  • npm, garn eller pnpm

Klon arkivet

git clone https://github.com/bfotool/nextjs-base-blog.git 
cd nextjs-base-blog

Installer afhængigheder

npm install

Konfigurer miljøvariabler

cp .env.example .env

Start udviklingsserveren

npm run dev

Åbn din browser og besøg:

http://localhost:3000

Tilgængelige scripts

Kommando Beskrivelse
npm run dev Start udviklingsserver
npm run build Opret produktionsbuild
npm kørselsstart Start produktionsserver
npm run lint Kør ESLint
npm-kørselsformat Formatér kode med Prettier
npm kører typetjek Kør TypeScript-tjek

Skift til en rigtig API

Hvis du vil forbinde projektet til en rigtig backend-API, skal du følge disse trin.

Trin 1: Deaktiver Mock API

Rediger .envfilen:

NEXT_PUBLIC_USE_MOCK_API=false

Trin 2: Angiv API-basis-URL'en

NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com

Trin 3: Match datatyper

Sørg for, at din backend-API returnerer data, der matcher TypeScript-definitionerne i:

src/types/index.ts

Der kræves ingen yderligere kodeændringer.

Tilpasning af indhold

Mock-indhold kan redigeres inde i:

src/mocks/posts.ts 
src/mocks/categories.ts 
src/mocks/authors.ts

Dette giver udviklere mulighed for hurtigt at tilpasse demoindhold.

Tilpasning af tema og brugergrænseflade

Global styling kan findes i:

src/app/globals.css

Projektet bruger følgende skrifttyper:

  • DM Sans

  • JetBrains Mono

Du kan ændre stilarter eller erstatte skrifttyper afhængigt af dine designkrav.

Konklusion

NextJS Base Blog er en kraftfuld og moderne skabelon til at oprette en blog med Next.js.

Projektets vigtigste fordele inkluderer:

  • moderne teknologistak

  • ren arkitektur

  • mock API til udvikling

  • nem integration med rigtige backend-API'er

  • responsiv brugergrænseflade og moderne funktioner

Hvis du bygger en blog, et udviklerwebsite eller en indholdsplatform med Next.js, kan dette repository spare dig betydelig udviklingstid.

Udforsk kildekoden her: https://github.com/bfotool/nextjs-base-blog