close

NextJS Base Blog: Modern bloggstartare med Next.js 15 och Tailwind

Om du letar efter en modern bloggstartmall byggd med Next.js är NextJS Base Blog- projektet en utmärkt utgångspunkt. Det är en fullfjädrad bloggapplikation med öppen källkod byggd med Next.js 15, React 19, TypeScript och Tailwind CSS 4 .

Projektet erbjuder en ren arkitektur, ett modernt användargränssnitt componentsoch ett simulerat API-lager, vilket gör det idealiskt för utvecklare som vill bygga en blogg snabbt utan att behöva konfigurera en backend.

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

Detta projekt är särskilt användbart för:

  • Utvecklare lär sig Next.js-appenRouter

  • Skapa en blogg eller innehållswebbplats snabbt

  • Skapa ett Next.js standardprojekt

  • Utveckla UI-funktioner innan man ansluter ett riktigt backend-API

Projektöversikt

NextJS Base Blog är utformad som en produktionsklar bloggmall med många vanliga funktioner som finns på moderna innehållswebbplatser.

Projektet omfattar:

  • en hemsida med utvalda inlägg

  • blogginläggssidor

  • kategorifiltrering

  • fulltextsökning

  • paginering

  • innehållsförteckning

  • relaterade inlägg

  • mörkt/ljust tema

En av de mest intressanta delarna av projektet är Fake API Layer, som simulerar ett REST API med hjälp av Axios-interceptorer. Detta gör det möjligt för utvecklare att bygga och testa applikationen utan att behöva en backend-server .

Viktiga funktioner

Hemsida

Hemsidan visar flera viktiga avsnitt:

  • utvalt hjältinlägg

  • kategorifilter

  • ett rutnät med blogginlägg

  • paginerad navigering

Layouten är helt responsiv och optimerad för både stationära och mobila enheter.

Blogginläggssida

Varje artikel är tillgänglig via en dynamisk rutt:

/blog/[slug]

Blogginläggssidan innehåller flera användbara funktioner:

  • hela artikelns innehåll

  • automatisk innehållsförteckning

  • beräknad läsningstid

  • knappar för sociala medier

  • förslag på relaterade inlägg

Dessa funktioner bidrar till att skapa en professionell läsupplevelse liknande moderna bloggplattformar.

Kategorisidor

Användare kan bläddra bland inlägg efter kategori.

Exempelrutt:

/blog/category/[slug]

Den här funktionen låter läsare utforska innehåll inom specifika ämnen.

Sökfunktionalitet

Projektet inkluderar en inbyggd söksida:

/search

Sökstöd:

  • resultat i realtid

  • avstudsad inmatning

  • söka bland titlar, utdrag och taggar

Detta förbättrar användbarheten och hjälper användare att snabbt hitta relevant innehåll.

Om och kontaktsidor

Projektet inkluderar även ytterligare sidor som vanligtvis finns på professionella bloggar.

Om sidan

Om-sidan presenterar:

  • laget

  • projektets berättelse

  • kärnvärden

Kontaktsida

Kontaktsidan innehåller ett fullständigt validerat formulär med:

  • formulärvalidering

  • toast-meddelanden

  • feedback om framgång och fel

Stöd för mörkt läge

Bloggen stöder mörkt läge och ljust läge .

Funktioner inkluderar:

  • automatisk systemtemaidentifiering

  • manuell växling

  • temapersistens med hjälp av localStorage

Falskt API-lager(utveckling utan backend)

En av de mest intressanta delarna av det här projektet är dess falska API-system .

Istället för att anropa en riktig server använder applikationen Axios-interceptorer för att simulera REST API-svar.

Hur det falska API:et fungerar

  1. Axios-instansen skapas i:

src/services/api-client.ts

  1. När miljövariabeln är aktiverad:

NEXT_PUBLIC_USE_MOCK_API=true

  1. Förfrågningar avlyssnas innan de når nätverket.

  2. Mörkhanterare returnerar falska svar med realistiska fördröjningar(200–600 ms).

  3. Svar beter sig som riktiga API-svar.

Mockdatan lagras i:

src/mocks/

Inklusive:

  • exempelinlägg

  • författare

  • kategorier

Tillgängliga API-slutpunkter

Mock-API:et stöder flera slutpunkter:

Metod Slutpunkt Beskrivning
FÅ /inlägg Paginerade blogginlägg
FÅ /inlägg/utvalda Utvalda inlägg
FÅ /inlägg/:snigel Enskilt blogginlägg
FÅ /kategorier Kategorilista
FÅ /författare Författarlista
POSTA /kontakta Skicka kontaktformulär

Teknikstack

Projektet använder en modern frontend-stack.

Lager Teknologi
Ram Next.js 15
UI-bibliotek Reagera 19
Språk TypeScript
Styling Medvind CSS 4
HTTP-klient Axios
Ikoner Lucide React
Luddning ESLint
Formatering Sötare

Denna stack ger:

  • stark typsäkerhet

  • underhållbar arkitektur

  • modern utvecklarupplevelse

Projektstruktur

Projektstrukturen följer en ren och skalbar arkitektur.

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

AppRouter

Katalogen appinnehåller alla applikationsrutter.

Exempel:

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

Detta följer Next.js- Routerapparkitekturen som introducerades i nyare versioner av Next.js.

Komponenter

Användargränssnitten componentsär organiserade i logiska grupper:

components/layout 
components/common 
components/blog

Denna struktur håller UI-koden organiserad och lättare att underhålla.

Tjänsteskikt

Mappen servicesinnehåller API-relaterad logik:

  • API-klientkonfiguration

  • posttjänst

  • kategoritjänst

  • kontaktformulärstjänst

Det här lagret separerar datahämtningslogik från användargränssnittetcomponents, vilket förbättrar skalbarheten.

Installationsguide

Krav

Innan du börjar, se till att du har:

  • Node.js 18 eller senare

  • npm, garn eller pnpm

Klona arkivet

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

Installera beroenden

npm install

Konfigurera miljövariabler

cp .env.example .env

Starta utvecklingsservern

npm run dev

Öppna din webbläsare och besök:

http://localhost:3000

Tillgängliga skript

Kommando Beskrivning
npm kör dev Starta utvecklingsservern
npm-körningsbygge Skapa produktionsversion
npm-körstart Starta produktionsservern
npm kör lint Kör ESLint
npm-körformat Formatera kod med Prettier
npm kör typkontroll Kör TypeScript-kontroller

Byta till ett riktigt API

Om du vill ansluta projektet till ett riktigt backend-API, följ dessa steg.

Steg 1: Inaktivera Mock API

Redigera .envfilen:

NEXT_PUBLIC_USE_MOCK_API=false

Steg 2: Ange API-bas-URL:en

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

Steg 3: Matcha datatyper

Se till att ditt backend-API returnerar data som matchar TypeScript-definitionerna i:

src/types/index.ts

Inga ytterligare kodändringar krävs.

Anpassa innehåll

Mock-innehåll kan redigeras inuti:

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

Detta gör det möjligt för utvecklare att snabbt anpassa demoinnehåll.

Anpassa tema och användargränssnitt

Global styling finns i:

src/app/globals.css

Projektet använder följande typsnitt:

  • DM Sans

  • JetBrains Mono

Du kan ändra stilar eller ersätta teckensnitt beroende på dina designkrav.

Slutsats

NextJS Base Blog är en kraftfull och modern startmall för att bygga en blogg med Next.js.

Projektets viktigaste fördelar inkluderar:

  • modern teknikstack

  • ren arkitektur

  • mock-API för utveckling

  • enkel integration med riktiga backend-API:er

  • responsivt användargränssnitt och moderna funktioner

Om du bygger en blogg, utvecklarwebbplats eller innehållsplattform med Next.js kan det här arkivet spara dig avsevärd utvecklingstid.

Utforska källkoden här: https://github.com/bfotool/nextjs-base-blog