Ha egy modern, Next.js-sel készült blogindító sablont keresel, a NextJS Base Blog projekt kiváló kiindulópont lehet. Ez egy teljes funkcionalitású, nyílt forráskódú blogalkalmazás, amely Next.js 15, React 19, TypeScript és Tailwind CSS 4 segítségével készült .
A projekt letisztult architektúrát, modern felhasználói felületet componentsés egy mock API réteget kínál, így ideális azoknak a fejlesztőknek, akik gyorsan szeretnének blogot létrehozni anélkül, hogy backendet kellene beállítani.
GitHub adattár: https://github.com/bfotool/nextjs-base-blog
Ez a projekt különösen hasznos a következők számára:
Fejlesztők tanulják a Next.js alkalmazástRouter
Blog vagy tartalomszolgáltató weboldal gyors létrehozása
Next.js sablonprojekt létrehozása
Felhasználói felület funkcióinak fejlesztése egy valódi háttér-API csatlakoztatása előtt
Projekt áttekintése
A NextJS Base Blog egy gyártásra kész blogsablonként készült, számos, a modern tartalomszolgáltató webhelyeken megtalálható funkcióval.
A projekt a következőket tartalmazza:
egy kezdőlap kiemelt bejegyzésekkel
blogbejegyzés oldalak
kategória szűrés
teljes szöveges keresés
lapszámozás
tartalomjegyzék
kapcsolódó bejegyzések
sötét/világos téma
A projekt egyik legérdekesebb része a Fake API réteg, amely egy REST API-t szimulál Axios interceptorok használatával. Ez lehetővé teszi a fejlesztők számára, hogy háttérszerver nélkül építsék fel és teszteljék az alkalmazást .
Főbb jellemzők
Kezdőlap
A főoldalon több fontos rész található:
kiemelt főposzt
kategóriaszűrők
blogbejegyzések rácsa
lapozott navigáció
Az elrendezés teljes mértékben reszponzív és optimalizált mind asztali, mind mobil eszközökre.
Blogbejegyzés oldal
Minden cikk dinamikus útvonalon keresztül érhető el:
/blog/[slug]
A blogbejegyzés oldal számos hasznos funkciót tartalmaz:
teljes cikk tartalma
automatikus tartalomjegyzék
becsült olvasási idő
közösségi megosztás gombok
kapcsolódó bejegyzésekre vonatkozó javaslatok
Ezek a funkciók segítenek a modern blogplatformokhoz hasonló professzionális olvasási élményt teremteni.
Kategóriaoldalak
A felhasználók kategóriák szerint böngészhetik a bejegyzéseket.
Példa útvonal:
/blog/category/[slug]
Ez a funkció lehetővé teszi az olvasók számára, hogy meghatározott témákon belüli tartalmakat böngésszenek.
Keresési funkció
A projekt tartalmaz egy beépített keresőoldalt:
/search
A keresés támogatja:
valós idejű eredmények
visszapattanásmentes bemenet
keresés címek, részletek és címkék között
Ez javítja a használhatóságot, és segít a felhasználóknak gyorsan megtalálni a releváns tartalmat.
Rólunk és Kapcsolat Oldalak
A projekt további oldalakat is tartalmaz, amelyek gyakran megtalálhatók a szakmai blogokon.
Rólunk oldal
A Rólunk oldal bemutatja:
a csapat
a projekt története
alapvető értékek
Kapcsolatfelvételi oldal
A Kapcsolatfelvétel oldalon egy teljesen érvényesített űrlap található, amely a következőket tartalmazza:
űrlapérvényesítés
értesítések
siker- és hibajelzés
Sötét mód támogatása
A blog támogatja a sötét és a világos módot .
Jellemzők többek között:
automatikus rendszertéma-észlelés
kézi váltás
témaperzisztencia a localStorage használatával
Hamis API réteg(fejlesztés háttérrendszer nélkül)
A projekt egyik legérdekesebb része a Fake API rendszer .
Egy valódi szerver meghívása helyett az alkalmazás Axios interceptorokat használ a REST API válaszok szimulálására.
Hogyan működik a hamis API
Az Axios példány a következő helyen jön létre:
src/services/api-client.ts
Amikor a környezeti változó engedélyezve van:
NEXT_PUBLIC_USE_MOCK_API=true
A kéréseket a rendszer még a hálózat elérése előtt elfogja.
Az ál-kezelők hamis válaszokat adnak vissza realisztikus késleltetéssel(200–600 ms).
A válaszok úgy viselkednek, mint a valódi API-válaszok.
A mock adatok tárolása a következő helyen történik:
src/mocks/
Beleértve:
minta bejegyzések
szerzői
kategóriák
Elérhető API-végpontok
A mock API számos végpontot támogat:
| Módszer | Végpont | Leírás |
|---|---|---|
| KAP | /bejegyzések | Oldalszámozott blogbejegyzések |
| KAP | /bejegyzések/kiemelt | Kiemelt bejegyzések |
| KAP | /bejegyzések/:slug | Egyetlen blogbejegyzés |
| KAP | /kategóriák | Kategórialista |
| KAP | /szerzői | Szerzői lista |
| POSTA | /érintkezés | Kapcsolatfelvételi űrlap beküldése |
Technológiai verem
A projekt egy modern frontend stacket használ.
| Réteg | Technológia |
|---|---|
| Keretrendszer | Next.js 15 |
| Felhasználói felület könyvtára | Reagálj 19 |
| Nyelv | Gépelt |
| Stílus | Hátszél CSS 4 |
| HTTP kliens | Axios |
| Ikonok | Lucide React |
| Szöszölődés | ESLint |
| Formázás | Csinosabb |
Ez a verem a következőket biztosítja:
erős típusú biztonság
karbantartható architektúra
modern fejlesztői élmény
Projekt felépítése
A projekt felépítése egy letisztult és skálázható architektúrát követ.
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
AlkalmazásRouter
A appkönyvtár tartalmazza az összes alkalmazás útvonalát.
Példák:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
Ez a Next.jsRouter újabb verzióiban bevezetett Next.js alkalmazásarchitektúrát követi.
Alkatrészek
A felhasználói felületek componentslogikai csoportokba vannak rendezve:
components/layout
components/common
components/blog
Ez a struktúra rendszerezi és könnyebben karbantartja a felhasználói felület kódját.
Szolgáltatások rétege
A servicesmappa API-val kapcsolatos logikát tartalmaz:
API kliens konfiguráció
postai szolgáltatás
kategória szolgáltatás
kapcsolatfelvételi űrlap szolgáltatás
Ez a réteg elválasztja az adatlekérő logikát a felhasználói felülettőlcomponents, ami javítja a skálázhatóságot.
Telepítési útmutató
Követelmények
Mielőtt elkezdené, győződjön meg róla, hogy rendelkezik a következőkkel:
Node.js 18 vagy újabb
npm, fonal vagy pnpm
A tárház klónozása
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
Függőségek telepítése
npm install
Környezeti változók konfigurálása
cp .env.example .env
Indítsa el a fejlesztői szervert
npm run dev
Nyisd meg a böngésződet és látogass el ide:
http://localhost:3000
Elérhető szkriptek
| Parancs | Leírás |
|---|---|
| npm fejlesztői futtatás | Fejlesztői szerver indítása |
| npm futtatás build | Éles verzió létrehozása |
| npm futás indítása | Éles szerver indítása |
| npm futtatás szösz | Futtassa az ESLint-et |
| npm futási formátum | Formázza a kódot a Prettierrel |
| npm futási típusellenőrzés | TypeScript ellenőrzések futtatása |
Váltás egy valódi API-ra
Ha egy valódi háttérbeli API-hoz szeretnéd csatlakoztatni a projektet, kövesd az alábbi lépéseket.
1. lépés: A Mock API letiltása
Szerkeszd a .envfájlt:
NEXT_PUBLIC_USE_MOCK_API=false
2. lépés: Az API alap URL-címének beállítása
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
3. lépés: Adattípusok egyeztetése
Győződjön meg arról, hogy a háttérbeli API a következő TypeScript definícióknak megfelelő adatokat ad vissza:
src/types/index.ts
Nincs szükség további kódmódosításokra.
Tartalom testreszabása
A próbatartalom belül szerkeszthető:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
Ez lehetővé teszi a fejlesztők számára a demótartalom gyors testreszabását.
Téma és felhasználói felület testreszabása
A globális stílus a következő helyeken található:
src/app/globals.css
A projekt a következő betűtípusokat használja:
DM Sans
JetBrains Mono
A tervezési követelményektől függően módosíthatja a stílusokat vagy lecserélheti a betűtípusokat.
Következtetés
A NextJS Base Blog egy hatékony és modern kezdősablon blogépítéshez a Next.js segítségével.
A projekt főbb előnyei a következők:
modern tech-verem
tiszta építészet
fejlesztéshez használt mock API
egyszerű integráció valódi backend API-kkal
reszponzív felhasználói felület és modern funkciók
Ha blogot, fejlesztői weboldalt vagy tartalomplatformot építesz a Next.js segítségével, ez a tárház jelentős fejlesztési időt takaríthat meg.
Fedezd fel a forráskódot itt: https://github.com/bfotool/nextjs-base-blog