Jekk qed tfittex template modern għall-bidu ta' blog mibni b'Next.js, il- proġett NextJS Base Blog huwa punt tat-tluq eċċellenti. Hija applikazzjoni ta' blog open-source b'karatteristiċi sħaħ mibnija b'Next.js 15, React 19, TypeScript, u Tailwind CSS 4 .
Il-proġett jipprovdi arkitettura nadifa, UI moderna components, u saff ta' API finta, li jagħmilha ideali għall-iżviluppaturi li jixtiequ jibnu blog malajr mingħajr ma jwaqqfu backend.
Repożitorju tal-GitHub: https://github.com/bfotool/nextjs-base-blog
Dan il-proġett huwa partikolarment utli għal:
Żviluppaturi jitgħallmu l-App Next.jsRouter
Tibni blog jew websajt tal-kontenut malajr
Il-ħolqien ta' proġett boilerplate Next.js
Żvilupp ta' karatteristiċi tal-UI qabel ma tikkonnettja API backend reali
Ħarsa Ġenerali lejn il-Proġett
NextJS Base Blog huwa ddisinjat bħala mudell ta' blog lest għall-produzzjoni b'ħafna karatteristiċi komuni misjuba f'websajts ta' kontenut moderni.
Il-proġett jinkludi:
homepage b'postijiet ewlenin
paġni tal-postijiet tal-blog
filtrazzjoni tal-kategoriji
tfittxija ta' test sħiħ
paġinazzjoni
werrej
postijiet relatati
tema skura/ċara
Waħda mill-aktar partijiet interessanti tal-proġett hija l- Fake API Layer, li tissimula REST API bl-użu ta' interċettaturi Axios. Dan jippermetti lill-iżviluppaturi jibnu u jittestjaw l-applikazzjoni mingħajr ma jkollhom bżonn server backend .
Karatteristiċi Ewlenin
Paġna ewlenija
Il-paġna ewlenija turi diversi sezzjonijiet importanti:
post ta' eroj prominenti
filtri tal-kategorija
grilja ta' postijiet tal-blog
navigazzjoni paġinata
Id-disinn huwa kompletament responsiv u ottimizzat kemm għal apparati tad-desktop kif ukoll għal apparati mobbli.
Paġna tal-Post tal-Blog
Kull artiklu huwa aċċessibbli permezz ta' rotta dinamika:
/blog/[slug]
Il-paġna tal-blog post tinkludi diversi karatteristiċi utli:
kontenut sħiħ tal-artiklu
werrej awtomatiku
ħin stmat tal-qari
buttuni ta' kondiviżjoni soċjali
suġġerimenti ta' postijiet relatati
Dawn il-karatteristiċi jgħinu biex tinħoloq esperjenza ta' qari professjonali simili għall-pjattaformi moderni tal-blogging.
Paġni tal-Kategorija
L-utenti jistgħu jibbrawżjaw il-postijiet skont il-kategorija.
Eżempju ta' rotta:
/blog/category/[slug]
Din il-karatteristika tippermetti lill-qarrejja jesploraw kontenut f'suġġetti speċifiċi.
Funzjonalità tat-Tiftix
Il-proġett jinkludi paġna ta' tiftix integrata:
/search
It-tiftix jappoġġja:
riżultati f'ħin reali
input imneħħi mill-bogħod
tiftix bejn titoli, siltiet, u tikketti
Dan itejjeb l-użabilità u jgħin lill-utenti jsibu kontenut rilevanti malajr.
Paġni ta' Dwar u Kuntatt
Il-proġett jinkludi wkoll paġni addizzjonali li jinstabu komunement fuq blogs professjonali.
Dwar il-Paġna
Il-paġna Dwar tintroduċi:
it-tim
l-istorja tal-proġett
valuri ewlenin
Paġna ta' Kuntatt
Il-paġna ta' Kuntatt tinkludi formola vvalidata bis-sħiħ b'dan li ġej:
validazzjoni tal-formola
notifiki tat-toast
feedback dwar is-suċċess u l-iżbalji
Appoġġ għall-Modalità Skura
Il-blog jappoġġja l-modalità skura u l-modalità tad-dawl .
Il-karatteristiċi jinkludu:
skoperta awtomatika tat-tema tas-sistema
toggle manwali
persistenza tat-tema bl-użu ta ' localStorage
Saff tal-API Falz(Żvilupp Mingħajr Backend)
Waħda mill-aktar partijiet interessanti ta' dan il-proġett hija s-sistema Fake API tiegħu .
Minflok ma ssejjaħ server reali, l-applikazzjoni tuża interċetturi Axios biex tissimula r-risposti tal-API REST.
Kif Taħdem l-API Falza
L-istanza ta' Axios tinħoloq f':
src/services/api-client.ts
Meta l-varjabbli tal-ambjent tkun attivata:
NEXT_PUBLIC_USE_MOCK_API=true
It-talbiet jiġu interċettati qabel ma jaslu fin-netwerk.
Il-maniġġaturi finti jirritornaw risposti foloz b'dewmien realistiku(200–600 ms).
Ir-risposti jaġixxu bħal risposti tal-API reali.
Id-dejta finta hija maħżuna fi:
src/mocks/
Inkluż:
postijiet ta' kampjun
awturi
kategoriji
Punti Finali tal-API Disponibbli
Il-mock API tappoġġja diversi endpoints:
| Metodu | Punt tat-tmiem | Deskrizzjoni |
|---|---|---|
| IKSEB | /postijiet | Postijiet tal-blog paġinati |
| IKSEB | /postijiet/dehru | Postijiet Dehru |
| IKSEB | /postijiet/:slug | Post wieħed fil-blogg |
| IKSEB | /kategoriji | Lista tal-kategoriji |
| IKSEB | /awturi | Lista tal-awturi |
| POST | /kuntatt | Ibgħat il-formola ta' kuntatt |
Munzell tat-Teknoloġija
Il-proġett juża frontend stack modern.
| Saff | Teknoloġija |
|---|---|
| Qafas | Next.js 15 |
| Librerija tal-UI | Irreaġixxi 19 |
| Lingwa | TypeScript |
| Stiljar | Tailwind CSS 4 |
| Klijent HTTP | Axjos |
| Ikoni | Lucide React |
| Linting | ESLint |
| Formattjar | Isbaħ |
Dan l-istack jipprovdi:
sigurtà tat-tip qawwi
arkitettura li tista' tinżamm
esperjenza moderna tal-iżviluppatur
Struttura tal-Proġett
L-istruttura tal-proġett issegwi arkitettura nadifa u skalabbli.
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
ApplikazzjoniRouter
Id- appdirettorju fih ir-rotot kollha tal-applikazzjoni.
Eżempji:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
Dan isegwi l- arkitettura tal-App Next.jsRouter introdotta f'verżjonijiet aktar ġodda ta' Next.js.
Komponenti
L-UI componentshuma organizzati fi gruppi loġiċi:
components/layout
components/common
components/blog
Din l-istruttura żżomm il-kodiċi tal-UI organizzat u aktar faċli biex jinżamm.
Saff tas-Servizzi
Il- servicesfowlder fih loġika relatata mal-API:
Konfigurazzjoni tal-klijent tal-API
servizz postali
servizz tal-kategorija
servizz ta' formola ta' kuntatt
Dan is-saff jissepara l-loġika tal-ġbir tad-dejta mill-UIcomponents, li ttejjeb l-iskalabbiltà.
Gwida għall-Installazzjoni
Rekwiżiti
Qabel tibda, kun żgur li għandek:
Node.js 18 jew aktar tard
npm, ħajta, jew pnpm
Ikklona r-Repożitorju
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
Installa Dipendenzi
npm install
Ikkonfigura l-Varjabbli tal-Ambjent
cp .env.example .env
Ibda s-Server tal-Iżvilupp
npm run dev
Iftaħ il-browser tiegħek u żur:
http://localhost:3000
Skripts Disponibbli
| Kmand | Deskrizzjoni |
|---|---|
| npm mexxi l-iżviluppatur | Ibda s-server tal-iżvilupp |
| ġiri npm build | Oħloq bini ta' produzzjoni |
| bidu tal-ġirja npm | Ibda s-server tal-produzzjoni |
| npm run lint | Mexxi l-ESLint |
| format tal-ġirja npm | Ifformattja l-kodiċi b'Prettier |
| verifika tat-tip ta' tħaddim ta' npm | Mexxi l-verifiki tat-TypeScript |
Tibdil għal API Reali
Jekk trid tqabbad il-proġett ma' API backend reali, segwi dawn il-passi.
Pass 1: Iddiżattiva l-Mock API
Editja l .env-fajl:
NEXT_PUBLIC_USE_MOCK_API=false
Pass 2: Issettja l-URL Bażi tal-API
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
Pass 3: Qabbel it-Tipi ta' Dejta
Kun żgur li l-API tal-backend tiegħek tirritorna dejta li taqbel mad-definizzjonijiet tat-TypeScript f’:
src/types/index.ts
M'hemmx bżonn ta' bidliet addizzjonali fil-kodiċi.
Personalizzazzjoni tal-Kontenut
Il-kontenut finta jista' jiġi editjat ġewwa:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
Dan jippermetti lill-iżviluppaturi jippersonalizzaw malajr il-kontenut tad-demo.
Personalizzazzjoni tat-Tema u l-UI
L-istil globali jista' jinstab f':
src/app/globals.css
Il-proġett juża l-fonts li ġejjin:
DM Sans
JetBrains Mono
Tista' timmodifika l-istili jew tissostitwixxi l-fonts skont ir-rekwiżiti tad-disinn tiegħek.
Konklużjoni
NextJS Base Blog huwa template tal-bidu qawwi u modern għall-bini ta' blog b'Next.js.
Il-vantaġġi ewlenin tal-proġett jinkludu:
munzell teknoloġiku modern
arkitettura nadifa
API finta għall-iżvilupp
integrazzjoni faċli ma' APIs backend reali
UI responsiva u karatteristiċi moderni
Jekk qed tibni blog, websajt għall-iżviluppaturi, jew pjattaforma tal-kontenut b'Next.js, dan ir-repożitorju jista' jiffrankalek ħin sinifikanti fl-iżvilupp.
Esplora l-kodiċi tas-sors hawn: https://github.com/bfotool/nextjs-base-blog