Ako tražite moderni predložak za blog izgrađen pomoću Next.js-a, projekt NextJS Base Blog izvrsna je polazna točka. To je potpuno opremljena aplikacija za blog otvorenog koda izgrađena pomoću Next.js 15, Reacta 19, TypeScripta i Tailwind CSS 4 .
Projekt nudi čistu arhitekturu, moderno korisničko sučelje componentsi lažni API sloj, što ga čini idealnim za programere koji žele brzo izgraditi blog bez postavljanja pozadinskog sustava.
GitHub repozitorij: https://github.com/bfotool/nextjs-base-blog
Ovaj projekt je posebno koristan za:
Programeri uče Next.js aplikacijuRouter
Brza izrada bloga ili web stranice sa sadržajem
Izrada Next.js boilerplate projekta
Razvoj UI značajki prije povezivanja pravog backend API-ja
Pregled projekta
NextJS Base Blog dizajniran je kao predložak bloga spreman za produkciju s mnogim uobičajenim značajkama koje se nalaze na modernim web stranicama sa sadržajem.
Projekt uključuje:
početna stranica s istaknutim objavama
stranice blog postova
filtriranje kategorija
pretraživanje cijelog teksta
paginacija
sadržaj
povezane objave
tamna/svijetla tema
Jedan od najzanimljivijih dijelova projekta je lažni API sloj, koji simulira REST API koristeći Axios presretače. To omogućuje programerima da izgrade i testiraju aplikaciju bez potrebe za backend poslužiteljem .
Ključne značajke
Početna stranica
Početna stranica prikazuje nekoliko važnih odjeljaka:
istaknuta objava glavnog junaka
filteri kategorija
mreža objava na blogu
paginirana navigacija
Izgled je potpuno responzivan i optimiziran za stolna računala i mobilne uređaje.
Stranica objave na blogu
Svaki članak je dostupan putem dinamičke rute:
/blog/[slug]
Stranica s objavama na blogu uključuje nekoliko korisnih značajki:
puni sadržaj članka
automatski sadržaj
procijenjeno vrijeme čitanja
gumbi za dijeljenje na društvenim mrežama
prijedlozi povezanih objava
Ove značajke pomažu u stvaranju profesionalnog iskustva čitanja sličnog modernim platformama za bloganje.
Stranice kategorija
Korisnici mogu pregledavati objave po kategorijama.
Primjer rute:
/blog/category/[slug]
Ova značajka omogućuje čitateljima istraživanje sadržaja unutar određenih tema.
Funkcionalnost pretraživanja
Projekt uključuje ugrađenu stranicu za pretraživanje:
/search
Pretraživanje podržava:
rezultati u stvarnom vremenu
debounted ulaz
pretraživanje naslova, odlomaka i oznaka
To poboljšava upotrebljivost i pomaže korisnicima da brzo pronađu relevantan sadržaj.
Stranice O nama i Kontakt
Projekt također uključuje dodatne stranice koje se obično nalaze na profesionalnim blogovima.
O stranici
Stranica O nama predstavlja:
tim
priča o projektu
temeljne vrijednosti
Stranica za kontakt
Stranica za kontakt uključuje potpuno validirani obrazac sa:
validacija obrasca
obavijesti o tostu
povratne informacije o uspjehu i pogrešci
Podrška za tamni način rada
Blog podržava tamni i svijetli način rada .
Značajke uključuju:
automatsko otkrivanje teme sustava
ručno prebacivanje
perzistentnost teme korištenjem localStorage-a
Lažni API sloj(razvoj bez pozadinskog okruženja)
Jedan od najzanimljivijih dijelova ovog projekta je njegov lažni API sustav .
Umjesto pozivanja pravog poslužitelja, aplikacija koristi Axios presretače za simulaciju REST API odgovora.
Kako funkcionira lažni API
Instanca Axiosa je kreirana u:
src/services/api-client.ts
Kada je varijabla okruženja omogućena:
NEXT_PUBLIC_USE_MOCK_API=true
Zahtjevi se presreću prije nego što stignu do mreže.
Lažni obrađivači vraćaju lažne odgovore s realističnim kašnjenjima(200–600 ms).
Odgovori se ponašaju kao pravi API odgovori.
Lažni podaci pohranjeni su u:
src/mocks/
Uključujući:
primjeri objava
autori
kategorije
Dostupne API krajnje točke
Mock API podržava nekoliko krajnjih točaka:
| Metoda | Krajnja točka | Opis |
|---|---|---|
| DOBITI | /objave | Paginirane objave na blogu |
| DOBITI | /objave/istaknuto | Istaknute objave |
| DOBITI | /objave/:slug | Jedna objava na blogu |
| DOBITI | /kategorije | Popis kategorija |
| DOBITI | /autori | Popis autora |
| POŠTA | /kontakt | Pošalji kontakt obrazac |
Tehnološki stog
Projekt koristi moderni frontend stack.
| Sloj | Tehnologija |
|---|---|
| Okvir | Next.js 15 |
| Biblioteka korisničkog sučelja | Reagiraj 19 |
| Jezik | TypeScript |
| Stil | CSS 4 za Tailwind |
| HTTP klijent | Axios |
| Ikone | Lucide React |
| Linting | ESLint |
| Formatiranje | Ljepše |
Ovaj stog pruža:
jaka sigurnost tipova
održiva arhitektura
moderno iskustvo za razvojne programere
Struktura projekta
Struktura projekta prati čistu i skalabilnu arhitekturu.
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
AplikacijaRouter
Direktorij appsadrži sve rute aplikacije.
Primjeri:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
Ovo prati arhitekturu aplikacije Next.jsRouter uvedenu u novijim verzijama Next.js-a.
Komponente
Korisnička sučelja componentssu organizirana u logičke grupe:
components/layout
components/common
components/blog
Ova struktura održava UI kod organiziranim i lakšim za održavanje.
Sloj usluga
Mapa servicessadrži logiku povezanu s API-jem:
Konfiguracija API klijenta
poštanska služba
usluga kategorije
usluga kontaktnog obrasca
Ovaj sloj odvaja logiku dohvaćanja podataka od korisničkog sučeljacomponents, što poboljšava skalabilnost.
Vodič za instalaciju
Zahtjevi
Prije početka, provjerite imate li:
Node.js 18 ili noviji
npm, pređa ili pnpm
Kloniraj repozitorij
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
Instaliranje ovisnosti
npm install
Konfiguriranje varijabli okruženja
cp .env.example .env
Pokrenite razvojni poslužitelj
npm run dev
Otvorite preglednik i posjetite:
http://localhost:3000
Dostupne skripte
| Naredba | Opis |
|---|---|
| npm pokretanje razvoja | Pokreni razvojni server |
| npm run build | Izradi produkcijsku verziju |
| početak izvršavanja npm-a | Pokreni produkcijski poslužitelj |
| npm run lint | Pokreni ESLint |
| format pokretanja npm-a | Formatirajte kod s Prettierom |
| npm run type check | Pokreni TypeScript provjere |
Prelazak na pravi API
Ako želite povezati projekt s pravim backend API-jem, slijedite ove korake.
Korak 1: Onemogućite Mock API
Uredite .envdatoteku:
NEXT_PUBLIC_USE_MOCK_API=false
Korak 2: Postavite osnovni URL API-ja
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
Korak 3: Usporedite tipove podataka
Osigurajte da vaš backend API vraća podatke koji odgovaraju TypeScript definicijama u:
src/types/index.ts
Nisu potrebne dodatne promjene koda.
Prilagođavanje sadržaja
Lažni sadržaj može se uređivati unutra:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
To omogućuje programerima da brzo prilagode demo sadržaj.
Prilagođavanje teme i korisničkog sučelja
Globalni stil se može naći u:
src/app/globals.css
Projekt koristi sljedeće fontove:
DM Sans
JetBrains Mono
Možete mijenjati stilove ili zamjenjivati fontove ovisno o vašim dizajnerskim zahtjevima.
Zaključak
NextJS Base Blog je moćan i moderan početni predložak za izgradnju bloga pomoću Next.js-a.
Ključne prednosti projekta uključuju:
moderni tehnološki paket
čista arhitektura
simulirani API za razvoj
jednostavna integracija sa stvarnim backend API-jima
responzivno korisničko sučelje i moderne značajke
Ako gradite blog, web stranicu za razvojne programere ili platformu za sadržaj pomoću Next.js-a, ovaj repozitorij vam može uštedjeti značajno vrijeme razvoja.
Istražite izvorni kod ovdje: https://github.com/bfotool/nextjs-base-blog