close

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

Hvis du leter etter en moderne bloggstartermal bygget med Next.js, er NextJS Base Blog- prosjektet et utmerket utgangspunkt. Det er en fullfunksjonell bloggapplikasjon med åpen kildekode bygget med Next.js 15, React 19, TypeScript og Tailwind CSS 4 .

Prosjektet tilbyr en ren arkitektur, et moderne brukergrensesnitt componentsog et simulert API-lag, noe som gjør det ideelt for utviklere som ønsker å bygge en blogg raskt uten å sette opp en backend.

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

Dette prosjektet er spesielt nyttig for:

  • Utviklere som lærer Next.js-appenRouter

  • Raskt bygge en blogg eller et innholdsnettsted

  • Opprette et Next.js standardprosjekt

  • Utvikle UI-funksjoner før tilkobling av et ekte backend-API

Prosjektoversikt

NextJS Base Blog er utformet som en produksjonsklar bloggmal med mange vanlige funksjoner som finnes på moderne innholdsnettsteder.

Prosjektet inkluderer:

  • en hjemmeside med utvalgte innlegg

  • blogginnleggssider

  • kategorifiltrering

  • fulltekstsøk

  • paginering

  • innholdsfortegnelse

  • relaterte innlegg

  • mørkt/lyst tema

En av de mest interessante delene av prosjektet er Fake API Layer, som simulerer et REST API ved hjelp av Axios-interceptorer. Dette lar utviklere bygge og teste applikasjonen uten å trenge en backend-server .

Viktige funksjoner

Hjemmeside

Hjemmesiden viser flere viktige seksjoner:

  • fremhevet heltinnlegg

  • kategorifiltre

  • et rutenett med blogginnlegg

  • paginert navigasjon

Layouten er fullt responsiv og optimalisert for både stasjonære og mobile enheter.

Blogginnleggsside

Hver artikkel er tilgjengelig via en dynamisk rute:

/blog/[slug]

Blogginnleggssiden inneholder flere nyttige funksjoner:

  • hele artikkelinnholdet

  • automatisk innholdsfortegnelse

  • estimert lesetid

  • knapper for deling på sosiale medier

  • forslag til relaterte innlegg

Disse funksjonene bidrar til å skape en profesjonell leseopplevelse som ligner på moderne bloggplattformer.

Kategorisider

Brukere kan bla gjennom innlegg etter kategori.

Eksempelrute:

/blog/category/[slug]

Denne funksjonen lar leserne utforske innhold innenfor bestemte emner.

Søkefunksjonalitet

Prosjektet inkluderer en innebygd søkeside:

/search

Søkestøtter:

  • resultater i sanntid

  • avvist innspill

  • søke på tvers av titler, utdrag og tagger

Dette forbedrer brukervennligheten og hjelper brukerne med å finne relevant innhold raskt.

Om og kontaktsider

Prosjektet inkluderer også tilleggssider som ofte finnes på profesjonelle blogger.

Om siden

Om-siden introduserer:

  • laget

  • prosjekthistorien

  • kjerneverdier

Kontaktside

Kontaktsiden inneholder et fullstendig validert skjema med:

  • skjemavalidering

  • toast-varsler

  • tilbakemeldinger om suksess og feil

Støtte for mørk modus

Bloggen støtter mørk modus og lys modus .

Funksjoner inkluderer:

  • automatisk systemtemagjenkjenning

  • manuell veksling

  • temapersistens ved bruk av localStorage

Falskt API-lag(utvikling uten backend)

En av de mest interessante delene av dette prosjektet er det falske API-systemet .

I stedet for å kalle en ekte server, bruker applikasjonen Axios-avskjæringsprogrammer for å simulere REST API-svar.

Hvordan den falske API-en fungerer

  1. Axios-instansen opprettes i:

src/services/api-client.ts

  1. Når miljøvariabelen er aktivert:

NEXT_PUBLIC_USE_MOCK_API=true

  1. Forespørsler blir fanget opp før de når nettverket.

  2. Imitasjonshåndterere returnerer falske svar med realistiske forsinkelser(200–600 ms).

  3. Svar oppfører seg som ekte API-svar.

Mock-dataene er lagret i:

src/mocks/

Inkludert:

  • eksempelinnlegg

  • forfattere

  • kategorier

Tilgjengelige API-endepunkter

Mock API-et støtter flere endepunkter:

Metode Endepunkt Beskrivelse
BLI /innlegg Paginerte blogginnlegg
BLI /innlegg/fremhevet Utvalgte innlegg
BLI /innlegg/:snegle Enkelt blogginnlegg
BLI /kategorier Kategoriliste
BLI /forfattere Forfatterliste
STOLPE /kontakt Send inn kontaktskjema

Teknologistabel

Prosjektet bruker en moderne frontend-stack.

Lag Teknologi
Rammeverk Next.js 15
UI-bibliotek Reager 19
Språk TypeScript
Styling Medvind CSS 4
HTTP-klient Axios
Ikoner Lucide React
Loinging ESLint
Formatering Penere

Denne stabelen gir:

  • sterk type sikkerhet

  • vedlikeholdbar arkitektur

  • moderne utvikleropplevelse

Prosjektstruktur

Prosjektstrukturen følger en ren og skalerbar arkitektur.

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

AppRouter

Katalogen appinneholder alle applikasjonsruter.

Eksempler:

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

Dette følger Next.js- Routerapparkitekturen som ble introdusert i nyere versjoner av Next.js.

Komponenter

Brukergrensesnittet componentser organisert i logiske grupper:

components/layout 
components/common 
components/blog

Denne strukturen holder brukergrensesnittkoden organisert og enklere å vedlikeholde.

Tjenestelaget

Mappen servicesinneholder API-relatert logikk:

  • API-klientkonfigurasjon

  • posttjeneste

  • kategoritjeneste

  • kontaktskjematjeneste

Dette laget skiller datahentingslogikk fra brukergrensesnittetcomponents, noe som forbedrer skalerbarheten.

Installasjonsveiledning

Krav

Før du starter, sørg for at du har:

  • Node.js 18 eller nyere

  • npm, garn eller pnpm

Klon depotet

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

Installer avhengigheter

npm install

Konfigurer miljøvariabler

cp .env.example .env

Start utviklingsserveren

npm run dev

Åpne nettleseren din og besøk:

http://localhost:3000

Tilgjengelige skript

Kommando Beskrivelse
npm run dev Start utviklingsserver
npm run build Lag produksjonsbygg
npm løpsstart Start produksjonsserveren
npm run lint Kjør ESLint
npm-kjøreformat Formater kode med Prettier
npm kjøre typesjekk Kjør TypeScript-kontroller

Bytter til et ekte API

Hvis du vil koble prosjektet til et ekte backend-API, følg disse trinnene.

Trinn 1: Deaktiver Mock API

Rediger .envfilen:

NEXT_PUBLIC_USE_MOCK_API=false

Trinn 2: Angi API-basis-URL-en

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

Trinn 3: Finn samsvarende datatyper

Sørg for at backend-API-et ditt returnerer data som samsvarer med TypeScript-definisjonene i:

src/types/index.ts

Ingen ytterligere kodeendringer er nødvendige.

Tilpasse innhold

Imitert innhold kan redigeres inni:

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

Dette lar utviklere raskt tilpasse demoinnhold.

Tilpasse tema og brukergrensesnitt

Global styling finnes i:

src/app/globals.css

Prosjektet bruker følgende fonter:

  • DM Sans

  • JetBrains Mono

Du kan endre stiler eller erstatte fonter avhengig av designkravene dine.

Konklusjon

NextJS Base Blog er en kraftig og moderne startmal for å bygge en blogg med Next.js.

Viktige fordeler med prosjektet inkluderer:

  • moderne teknologistabel

  • ren arkitektur

  • mock API for utvikling

  • enkel integrasjon med ekte backend-API-er

  • responsivt brukergrensesnitt og moderne funksjoner

Hvis du bygger en blogg, et utviklernettsted eller en innholdsplattform med Next.js, kan dette arkivet spare deg for betydelig utviklingstid.

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