Dacă sunteți în căutarea unui șablon modern de blog creat cu Next.js, proiectul NextJS Base Blog este un punct de plecare excelent. Este o aplicație de blog open-source completă, construită cu Next.js 15, React 19, TypeScript și Tailwind CSS 4 .
Proiectul oferă o arhitectură curată, o interfață de utilizator modernă componentsși un strat API simulat, ceea ce îl face ideal pentru dezvoltatorii care doresc să construiască rapid un blog fără a configura un backend.
Repozitoriu GitHub: https://github.com/bfotool/nextjs-base-blog
Acest proiect este util în special pentru:
Dezvoltatori care învață aplicația Next.jsRouter
Construirea rapidă a unui blog sau a unui site web de conținut
Crearea unui proiect boilerplate Next.js
Dezvoltarea funcțiilor UI înainte de conectarea unei API backend reale
Prezentare generală a proiectului
NextJS Base Blog este conceput ca un șablon de blog pregătit pentru producție, cu multe caracteristici comune întâlnite în site-urile web de conținut moderne.
Proiectul include:
o pagină principală cu postări recomandate
pagini de articole de blog
filtrare pe categorii
căutare în text complet
paginare
Cuprins
postări similare
temă întunecată/luminoasă
Una dintre cele mai interesante părți ale proiectului este Fake API Layer, care simulează o API REST folosind interceptori Axios. Acest lucru permite dezvoltatorilor să construiască și să testeze aplicația fără a fi nevoie de un server backend .
Caracteristici cheie
Pagina principală
Pagina principală afișează câteva secțiuni importante:
postare principală
filtre de categorie
o grilă de postări pe blog
navigare paginată
Layout-ul este complet responsiv și optimizat atât pentru desktop, cât și pentru dispozitive mobile.
Pagină de postare pe blog
Fiecare articol este accesibil printr-o rută dinamică:
/blog/[slug]
Pagina de articole de pe blog include mai multe funcții utile:
conținutul complet al articolului
cuprins automat
timpul estimat de citire
butoane de partajare socială
sugestii de postări similare
Aceste caracteristici ajută la crearea unei experiențe de citire profesionale, similară cu platformele moderne de blogging.
Pagini de categorii
Utilizatorii pot răsfoi postările după categorie.
Exemplu de rută:
/blog/category/[slug]
Această funcție permite cititorilor să exploreze conținut în cadrul unor subiecte specifice.
Funcționalitate de căutare
Proiectul include o pagină de căutare încorporată:
/search
Căutarea acceptă:
rezultate în timp real
intrare anti-rebouncing
căutarea în titluri, fragmente și etichete
Acest lucru îmbunătățește utilizabilitatea și îi ajută pe utilizatori să găsească rapid conținut relevant.
Pagini Despre și Contact
Proiectul include și pagini suplimentare întâlnite frecvent pe blogurile profesionale.
Despre pagină
Pagina Despre prezintă:
echipa
povestea proiectului
valori fundamentale
Pagina de contact
Pagina de Contact include un formular complet validat cu:
validarea formularului
notificări toast
feedback de succes și eroare
Suport pentru modul întunecat
Blogul acceptă modul întunecat și modul luminos .
Caracteristicile includ:
detectarea automată a temei de sistem
comutare manuală
persistența temei folosind localStorage
Strat API fals(Dezvoltare fără backend)
Una dintre cele mai interesante părți ale acestui proiect este sistemul său Fake API .
În loc să apeleze un server real, aplicația folosește interceptori Axios pentru a simula răspunsurile API-ului REST.
Cum funcționează API-ul fals
Instanța Axios este creată în:
src/services/api-client.ts
Când variabila de mediu este activată:
NEXT_PUBLIC_USE_MOCK_API=true
Cererile sunt interceptate înainte de a ajunge la rețea.
Rubrica de gestionare simulată returnează răspunsuri false cu întârzieri realiste(200–600 ms).
Răspunsurile se comportă ca răspunsuri API reale.
Datele simulate sunt stocate în:
src/mocks/
Inclusiv:
postări de exemplu
autori
categorii
Puncte finale API disponibile
API-ul mock acceptă mai multe endpoint-uri:
| Metodă | Punct final | Descriere |
|---|---|---|
| OBŢINE | /postări | Postări de blog paginate |
| OBŢINE | /postări/recomandate | Postări recomandate |
| OBŢINE | /postări/:slug | Postare unică pe blog |
| OBŢINE | /categorii | Listă de categorii |
| OBŢINE | /autori | Lista autorilor |
| POST | /contact | Trimiteți formularul de contact |
Stiva tehnologică
Proiectul folosește un stack frontend modern.
| Strat | Tehnologie |
|---|---|
| Cadru | Next.js 15 |
| Bibliotecă UI | Reacționează 19 |
| Limbă | TypeScript |
| Stilizare | Tailwind CSS 4 |
| Client HTTP | Axios |
| Pictograme | Lucide React |
| Scămoșuri | ESLint |
| Formatare | Mai frumoasă |
Această stivă oferă:
siguranță de tip puternic
arhitectură ușor de întreținut
experiență modernă de dezvoltare
Structura proiectului
Structura proiectului urmează o arhitectură curată și scalabilă.
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
AplicațieRouter
Directorul appconține toate rutele aplicației.
Exemple:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
Aceasta urmează arhitectura aplicației Next.jsRouter introdusă în versiunile mai noi de Next.js.
Componente
Interfețele utilizator componentssunt organizate în grupuri logice:
components/layout
components/common
components/blog
Această structură menține codul UI organizat și mai ușor de întreținut.
Stratul Serviciilor
Folderul servicesconține logica legată de API:
Configurarea clientului API
serviciul poștal
categorie serviciu
serviciul de formulare de contact
Acest strat separă logica de preluare a datelor de interfața utilizatoruluicomponents, ceea ce îmbunătățește scalabilitatea.
Ghid de instalare
Cerințe
Înainte de a începe, asigurați-vă că aveți:
Node.js 18 sau o versiune ulterioară
npm, fire sau pnpm
Clonează depozitul
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
Instalați dependențe
npm install
Configurați variabilele de mediu
cp .env.example .env
Porniți serverul de dezvoltare
npm run dev
Deschideți browserul și accesați:
http://localhost:3000
Scripturi disponibile
| Comanda | Descriere |
|---|---|
| npm rulează dev | Porniți serverul de dezvoltare |
| compilare rulare npm | Creați o versiune de producție |
| pornirea rulării npm | Porniți serverul de producție |
| npm rulează lint | Rulați ESLint |
| format de rulare npm | Formatează codul cu Prettier |
| verificare tip rulare npm | Execută verificări TypeScript |
Trecerea la o API reală
Dacă doriți să conectați proiectul la o API backend reală, urmați acești pași.
Pasul 1: Dezactivați API-ul Mock
Editați .envfișierul:
NEXT_PUBLIC_USE_MOCK_API=false
Pasul 2: Setați adresa URL de bază a API-ului
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
Pasul 3: Potrivirea tipurilor de date
Asigurați-vă că API-ul backend returnează date care corespund definițiilor TypeScript din:
src/types/index.ts
Nu sunt necesare modificări suplimentare de cod.
Personalizarea conținutului
Conținutul simulat poate fi editat în:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
Acest lucru permite dezvoltatorilor să personalizeze rapid conținutul demonstrației.
Personalizarea temei și a interfeței utilizator
Stilul global poate fi găsit în:
src/app/globals.css
Proiectul folosește următoarele fonturi:
DM Sans
JetBrains Mono
Puteți modifica stilurile sau înlocui fonturile în funcție de cerințele dvs. de design.
Concluzie
NextJS Base Blog este un șablon de început puternic și modern pentru construirea unui blog cu Next.js.
Printre avantajele cheie ale proiectului se numără:
stivă tehnologică modernă
arhitectură curată
API simulat pentru dezvoltare
integrare ușoară cu API-uri backend reale
interfață de utilizator responsivă și funcții moderne
Dacă construiești un blog, un site web pentru dezvoltatori sau o platformă de conținut cu Next.js, acest repository îți poate economisi timp semnificativ de dezvoltare.
Explorează codul sursă aici: https://github.com/bfotool/nextjs-base-blog