Če iščete sodobno predlogo za začetek bloga, zgrajeno z Next.js, je projekt NextJS Base Blog odlično izhodišče. Gre za polno funkcionalno odprtokodno aplikacijo za blog, zgrajeno z Next.js 15, React 19, TypeScript in Tailwind CSS 4 .
Projekt ponuja čisto arhitekturo, sodoben uporabniški vmesnik componentsin lažno plast API-ja, zaradi česar je idealen za razvijalce, ki želijo hitro zgraditi blog brez namestitve zalednega sistema.
Repozitorij GitHub: https://github.com/bfotool/nextjs-base-blog
Ta projekt je še posebej uporaben za:
Razvijalci, ki se učijo aplikacije Next.jsRouter
Hitra izdelava bloga ali spletnega mesta z vsebinami
Ustvarjanje standardnega projekta Next.js
Razvoj funkcij uporabniškega vmesnika pred povezovanjem pravega zalednega API-ja
Pregled projekta
Osnovni blog NextJS je zasnovan kot predloga bloga, pripravljena za produkcijo, s številnimi skupnimi funkcijami, ki jih najdemo na sodobnih spletnih mestih z vsebino.
Projekt vključuje:
domača stran z izbranimi objavami
strani objav v spletnem dnevniku
filtriranje kategorij
iskanje po celotnem besedilu
oštevilčenje strani
kazalo vsebine
povezane objave
temna/svetla tema
Eden najzanimivejših delov projekta je lažna plast API-ja, ki simulira REST API z uporabo prestreznikov Axios. To razvijalcem omogoča, da zgradijo in preizkusijo aplikacijo brez potrebe po zalednem strežniku .
Ključne lastnosti
Domača stran
Domača stran prikazuje več pomembnih razdelkov:
predstavljena objava junaka
filtri kategorij
mreža objav na blogu
oštevilčena navigacija
Postavitev je popolnoma odzivna in optimizirana tako za namizne kot mobilne naprave.
Stran objave v spletnem dnevniku
Do vsakega članka je mogoče dostopati prek dinamične poti:
/blog/[slug]
Stran z objavami v spletnem dnevniku vključuje več uporabnih funkcij:
celotna vsebina članka
samodejno kazalo vsebine
predvideni čas branja
gumbi za deljenje na družbenih omrežjih
predlogi za povezane objave
Te funkcije pomagajo ustvariti profesionalno bralno izkušnjo, podobno sodobnim platformam za bloganje.
Strani kategorij
Uporabniki lahko brskajo po objavah po kategorijah.
Primer poti:
/blog/category/[slug]
Ta funkcija bralcem omogoča raziskovanje vsebine znotraj določenih tem.
Funkcionalnost iskanja
Projekt vključuje vgrajeno iskalno stran:
/search
Iskanje podpira:
rezultati v realnem času
odbojni vhod
iskanje po naslovih, odlomkih in oznakah
To izboljša uporabnost in uporabnikom pomaga hitro najti ustrezno vsebino.
Strani O nas in Kontakt
Projekt vključuje tudi dodatne strani, ki jih pogosto najdemo na profesionalnih blogih.
O strani
Stran »O nas« predstavlja:
ekipa
zgodba projekta
temeljne vrednote
Kontaktna stran
Kontaktna stran vsebuje popolnoma potrjen obrazec z:
validacija obrazca
obvestila o toastih
povratne informacije o uspehu in napakah
Podpora za temni način
Blog podpira temni in svetli način .
Značilnosti vključujejo:
samodejno zaznavanje sistemske teme
ročni preklop
vztrajnost teme z uporabo localStorage
Lažna plast API-ja(razvoj brez zalednega dela)
Eden najzanimivejših delov tega projekta je njegov sistem lažnih API-jev .
Namesto klicanja pravega strežnika aplikacija uporablja prestreznike Axios za simulacijo odgovorov REST API-ja.
Kako deluje lažni API
Primerek Axios je ustvarjen v:
src/services/api-client.ts
Ko je spremenljivka okolja omogočena:
NEXT_PUBLIC_USE_MOCK_API=true
Zahteve se prestrežejo, preden dosežejo omrežje.
Lažni obdelovalci vrnejo lažne odgovore z realističnimi zakasnitvami(200–600 ms).
Odgovori se obnašajo kot pravi odgovori API-ja.
Podatki simulacije so shranjeni v:
src/mocks/
Vključno z:
vzorčne objave
avtorji
kategorije
Razpoložljive končne točke API-ja
Navidezni API podpira več končnih točk:
| Metoda | Končna točka | Opis |
|---|---|---|
| PRIDOBITE | /objave | Oštevilčene objave v spletnem dnevniku |
| PRIDOBITE | /objave/izpostavljeno | Izpostavljene objave |
| PRIDOBITE | /objave/:slug | Posamezna objava v spletnem dnevniku |
| PRIDOBITE | /kategorije | Seznam kategorij |
| PRIDOBITE | /avtorji | Seznam avtorjev |
| OBJAVA | /kontakt | Pošlji kontaktni obrazec |
Tehnološki sklad
Projekt uporablja sodoben frontend stack.
| Plast | Tehnologija |
|---|---|
| Okvir | Next.js 15 |
| Knjižnica uporabniškega vmesnika | Reagiraj 19 |
| Jezik | TypeScript |
| Stiliziranje | Tailwind CSS 4 |
| HTTP odjemalec | Axios |
| Ikone | Lucide React |
| Linting | ESLint |
| Oblikovanje | Lepša |
Ta sklad zagotavlja:
močna varnost tipov
vzdrževalna arhitektura
sodobna izkušnja razvijalcev
Struktura projekta
Struktura projekta sledi čisti in skalabilni arhitekturi.
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
AplikacijaRouter
Imenik appvsebuje vse poti aplikacije.
Primeri:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
To sledi arhitekturi aplikacije Next.jsRouter, predstavljeni v novejših različicah Next.js.
Komponente
Uporabniški vmesniki componentsso organizirani v logične skupine:
components/layout
components/common
components/blog
Zaradi te strukture je koda uporabniškega vmesnika organizirana in enostavnejša za vzdrževanje.
Storitvena plast
Mapa servicesvsebuje logiko, povezano z API-jem:
Konfiguracija odjemalca API-ja
poštna storitev
storitev kategorije
storitev kontaktnega obrazca
Ta plast ločuje logiko pridobivanja podatkov od uporabniškega vmesnikacomponents, kar izboljša skalabilnost.
Navodila za namestitev
Zahteve
Preden začnete, se prepričajte, da imate:
Node.js 18 ali novejši
npm, preja ali pnpm
Kloniraj repozitorij
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
Namestitev odvisnosti
npm install
Konfiguriraj spremenljivke okolja
cp .env.example .env
Zaženite razvojni strežnik
npm run dev
Odprite brskalnik in obiščite:
http://localhost:3000
Razpoložljivi skripti
| Ukaz | Opis |
|---|---|
| npm zagon razvoj | Zaženi razvojni strežnik |
| gradnja zagona npm | Ustvari produkcijsko različico |
| začetek izvajanja npm | Zaženi produkcijski strežnik |
| npm run lint | Zaženi ESLint |
| format izvajanja npm | Oblikujte kodo s Prettierjem |
| npm run tip check | Izvajanje preverjanj TypeScript |
Prehod na pravi API
Če želite projekt povezati z dejanskim zalednim API-jem, sledite tem korakom.
1. korak: Onemogočite Mock API
Uredite .envdatoteko:
NEXT_PUBLIC_USE_MOCK_API=false
2. korak: Nastavite osnovni URL API-ja
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
3. korak: Ujemanje tipov podatkov
Zagotovite, da vaš zaledni API vrne podatke, ki se ujemajo z definicijami TypeScript v:
src/types/index.ts
Dodatne spremembe kode niso potrebne.
Prilagajanje vsebine
Vsebino simulacije je mogoče urejati v:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
To razvijalcem omogoča hitro prilagajanje predstavitvene vsebine.
Prilagajanje teme in uporabniškega vmesnika
Globalno oblikovanje lahko najdete v:
src/app/globals.css
Projekt uporablja naslednje pisave:
DM Sans
JetBrains Mono
Stile lahko spremenite ali zamenjate pisave glede na vaše oblikovalske zahteve.
Zaključek
NextJS Base Blog je zmogljiva in moderna predloga za začetnike za gradnjo bloga z Next.js.
Ključne prednosti projekta vključujejo:
sodoben tehnološki sklad
čista arhitektura
simulacija API-ja za razvoj
enostavna integracija z resničnimi zalednimi API-ji
odziven uporabniški vmesnik in sodobne funkcije
Če z Next.js gradite blog, spletno mesto za razvijalce ali platformo za vsebine, vam lahko ta repozitorij prihrani veliko časa pri razvoju.
Raziščite izvorno kodo tukaj: https://github.com/bfotool/nextjs-base-blog