Nëse jeni duke kërkuar një shabllon modern për nisjen e blogut të ndërtuar me Next.js, projekti NextJS Base Blog është një pikënisje e shkëlqyer. Është një aplikacion blogu me kod të hapur dhe funksione të plota i ndërtuar me Next.js 15, React 19, TypeScript dhe Tailwind CSS 4 .
Projekti ofron një arkitekturë të pastër, ndërfaqe përdoruesi moderne componentsdhe një shtresë API të improvizuar, duke e bërë atë ideal për zhvilluesit që duan të ndërtojnë një blog shpejt pa krijuar një backend.
Depozita e GitHub: https://github.com/bfotool/nextjs-base-blog
Ky projekt është veçanërisht i dobishëm për:
Zhvilluesit që mësojnë aplikacionin Next.jsRouter
Ndërtimi i një blogu ose faqeje interneti me përmbajtje të shpejtë
Krijimi i një projekti standard Next.js
Zhvillimi i veçorive të ndërfaqes së përdoruesit përpara lidhjes së një API-je të vërtetë të backend-it
Përmbledhje e Projektit
NextJS Base Blog është projektuar si një shabllon blogu i gatshëm për prodhim me shumë karakteristika të zakonshme që gjenden në faqet e internetit moderne të përmbajtjes.
Projekti përfshin:
një faqe kryesore me postime të paraqitura
faqet e postimeve në blog
filtrim kategorish
kërkim me tekst të plotë
faqosje
tabela e përmbajtjes
postime të lidhura
temë e errët/e çelët
Një nga pjesët më interesante të projektit është Shtresa e API-t të rremë, e cila simulon një API REST duke përdorur interceptorët Axios. Kjo u lejon zhvilluesve të ndërtojnë dhe testojnë aplikacionin pa pasur nevojë për një server backend .
Karakteristikat kryesore
Faqja kryesore
Faqja kryesore shfaq disa seksione të rëndësishme:
postim i heroit të paraqitur
filtra kategorish
një rrjet postimesh në blog
navigim i faqezuar
Paraqitja është plotësisht e përgjegjshme dhe e optimizuar si për pajisjet desktop ashtu edhe për ato mobile.
Faqja e Postimit në Blog
Çdo artikull është i arritshëm nëpërmjet një rruge dinamike:
/blog/[slug]
Faqja e postimeve në blog përfshin disa veçori të dobishme:
përmbajtja e plotë e artikullit
tabela automatike e përmbajtjes
koha e parashikuar e leximit
butonat e ndarjes në rrjetet sociale
sugjerime për postime të lidhura
Këto karakteristika ndihmojnë në krijimin e një përvoje profesionale leximi të ngjashme me platformat moderne të blogjeve.
Faqet e kategorive
Përdoruesit mund të shfletojnë postimet sipas kategorisë.
Shembull itinerari:
/blog/category/[slug]
Kjo veçori u lejon lexuesve të eksplorojnë përmbajtje brenda temave specifike.
Funksionaliteti i Kërkimit
Projekti përfshin një faqe kërkimi të integruar:
/search
Kërkimi mbështet:
rezultate në kohë reale
të dhëna të denoncuara
duke kërkuar nëpër tituj, fragmente dhe etiketa
Kjo përmirëson përdorshmërinë dhe i ndihmon përdoruesit të gjejnë shpejt përmbajtje relevante.
Rreth nesh dhe faqet e kontaktit
Projekti përfshin gjithashtu faqe shtesë që gjenden zakonisht në blogjet profesionale.
Rreth faqes
Faqja "Rreth nesh" prezanton:
ekipi
historia e projektit
vlerat thelbësore
Faqja e Kontaktit
Faqja e Kontaktit përfshin një formular të validuar plotësisht me:
validimi i formularit
njoftimet e publikimit
reagime për suksesin dhe gabimin
Mbështetje për Modalitetin e Errët
Blogu mbështet modalitetin e errët dhe modalitetin e ndriçuar .
Karakteristikat përfshijnë:
zbulimi automatik i temës së sistemit
ndërrues manual
qëndrueshmëria e temës duke përdorur localStorage
Shtresa e rreme e API-t(Zhvillim pa Backend)
Një nga pjesët më interesante të këtij projekti është sistemi i tij Fake API .
Në vend që të thërrasë një server të vërtetë, aplikacioni përdor interceptorët Axios për të simuluar përgjigjet e REST API.
Si funksionon API-ja e rreme
Instanca e Axios krijohet në:
src/services/api-client.ts
Kur ndryshorja e mjedisit është e aktivizuar:
NEXT_PUBLIC_USE_MOCK_API=true
Kërkesat kapen përpara se të arrijnë në rrjet.
Përpunuesit e improvizuar kthejnë përgjigje të rreme me vonesa realiste(200–600 ms).
Përgjigjet sillen si përgjigje të vërteta të API-t.
Të dhënat e simuluara ruhen në:
src/mocks/
Duke përfshirë:
shembull postimesh
autorët
kategoritë
Pikat fundore të API-t të disponueshme
API-ja simuluese mbështet disa pika fundore:
| Metoda | Pika e Fundit | Përshkrimi |
|---|---|---|
| MERR | /postime | Postime në blog me faqe të faqosura |
| MERR | /postime/të paraqitura | Postimet e veçuara |
| MERR | /postime/:slug | Postim i vetëm në blog |
| MERR | /kategori | Lista e kategorive |
| MERR | /autorë | Lista e autorëve |
| POSTO | /kontakt | Dorëzo formularin e kontaktit |
Stack i Teknologjisë
Projekti përdor një frontend stack modern.
| Shtresa | Teknologji |
|---|---|
| Kornizë | Next.js 15 |
| Biblioteka e ndërfaqes së përdoruesit | Reagimi 19 |
| Gjuha | TypeScript |
| Stilimi | Tailwind CSS 4 |
| Klient HTTP | Axios |
| Ikona | Lucide React |
| Linting | ESLint |
| Formatimi | Më e bukur |
Kjo grumbull ofron:
siguri e tipit të fortë
arkitekturë e mirëmbajtur
përvoja moderne e zhvilluesit
Struktura e Projektit
Struktura e projektit ndjek një arkitekturë të pastër dhe të shkallëzueshme.
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
AplikacionRouter
Drejtoria apppërmban të gjitha rrugët e aplikacionit.
Shembuj:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
Kjo ndjek arkitekturën e aplikacionit Next.jsRouter të prezantuar në versionet më të reja të Next.js.
Komponentët
UI componentsështë i organizuar në grupe logjike:
components/layout
components/common
components/blog
Kjo strukturë e mban kodin e ndërfaqes së përdoruesit të organizuar dhe më të lehtë për t'u mirëmbajtur.
Shtresa e Shërbimeve
Dosja servicespërmban logjikën që lidhet me API-n:
Konfigurimi i klientit API
shërbim postar
shërbim kategorie
shërbimi i formularit të kontaktit
Kjo shtresë ndan logjikën e marrjes së të dhënave nga ndërfaqja e përdoruesitcomponents, gjë që përmirëson shkallëzueshmërinë.
Udhëzuesi i instalimit
Kërkesat
Para se të filloni, sigurohuni që keni:
Node.js 18 ose më i ri
npm, fije ose pnpm
Klononi Depozitën
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
Instalimi i Varësive
npm install
Konfiguro Variablat e Mjedisit
cp .env.example .env
Nisni Serverin e Zhvillimit
npm run dev
Hapni shfletuesin tuaj dhe vizitoni:
http://localhost:3000
Skripte të Disponueshme
| Komanda | Përshkrimi |
|---|---|
| npm run dev | Nis serverin e zhvillimit |
| ndërtimi i ekzekutimit npm | Krijo ndërtimin e prodhimit |
| fillimi i ekzekutimit npm | Nis serverin e prodhimit |
| npm run lint | Ekzekutoni ESLint-in |
| formati i ekzekutimit npm | Formato kodin me Prettier |
| kontrolli i tipit të ekzekutimit të npm | Ekzekutoni kontrollet e TypeScript |
Kalimi në një API të Vërtetë
Nëse doni ta lidhni projektin me një API të vërtetë të backend-it, ndiqni këto hapa.
Hapi 1: Çaktivizo Mock API-n
Redaktoni skedarin .env:
NEXT_PUBLIC_USE_MOCK_API=false
Hapi 2: Vendosni URL-në bazë të API-t
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
Hapi 3: Përputhni Llojet e të Dhënave
Sigurohuni që API-ja juaj e backend-it të kthejë të dhëna që përputhen me përkufizimet e TypeScript në:
src/types/index.ts
Nuk kërkohen ndryshime shtesë në kod.
Përshtatja e përmbajtjes
Përmbajtja e simuluar mund të modifikohet brenda:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
Kjo u lejon zhvilluesve të personalizojnë shpejt përmbajtjen demo.
Personalizimi i temës dhe ndërfaqes së përdoruesit
Stilimi global mund të gjendet në:
src/app/globals.css
Projekti përdor fontet e mëposhtme:
DM Sans
JetBrains Mono
Ju mund të modifikoni stilet ose të zëvendësoni fontet në varësi të kërkesave tuaja të dizajnit.
Përfundim
NextJS Base Blog është një shabllon fillestar i fuqishëm dhe modern për ndërtimin e një blogu me Next.js.
Përparësitë kryesore të projektit përfshijnë:
grumbull teknologjish moderne
arkitekturë e pastër
API simuluese për zhvillim
integrim i lehtë me API-të reale të backend-it
ndërfaqe përdoruesi responsive dhe karakteristika moderne
Nëse po ndërtoni një blog, faqe interneti për zhvilluesit ose një platformë përmbajtjeje me Next.js, kjo depo mund t'ju kursejë kohë të konsiderueshme zhvillimi.
Eksploroni kodin burimor këtu: https://github.com/bfotool/nextjs-base-blog