Jei ieškote modernaus tinklaraščio pradžios šablono, sukurto naudojant „Next.js“, „NextJS Base Blog“ projektas yra puikus atspirties taškas. Tai visavertė atvirojo kodo tinklaraščio programa, sukurta naudojant „Next.js 15“, „React 19“, „TypeScript“ ir „Tailwind CSS 4“ .
Projektas pasižymi švaria architektūra, modernia vartotojo sąsaja componentsir imitaciniu API sluoksniu, todėl idealiai tinka kūrėjams, norintiems greitai sukurti tinklaraštį nekuriant serverio.
„GitHub“ saugykla: https://github.com/bfotool/nextjs-base-blog
Šis projektas ypač naudingas:
Kūrėjai mokosi „Next.js“ programėlėsRouter
Greitas tinklaraščio ar turinio svetainės kūrimas
Next.js standartinio projekto kūrimas
Vartotojo sąsajos funkcijų kūrimas prieš prijungiant tikrąją serverio API
Projekto apžvalga
„NextJS Base Blog“ sukurtas kaip gamybai paruoštas tinklaraščio šablonas su daugeliu įprastų funkcijų, būdingų šiuolaikinėms turinio svetainėms.
Projektas apima:
pagrindinis puslapis su svarbiausiais įrašais
tinklaraščio įrašų puslapiai
kategorijų filtravimas
viso teksto paieška
puslapiavimas
turinys
susiję įrašai
tamsi/šviesi tema
Viena įdomiausių projekto dalių yra netikro API sluoksnis(angl. Fake API Layer), kuris imituoja REST API naudodamas „Axios“ perėmėjus. Tai leidžia kūrėjams kurti ir testuoti programą nereikalaujant serverio .
Pagrindinės savybės
Pagrindinis puslapis
Pradiniame puslapyje yra keli svarbūs skyriai:
pagrindinis įrašas
kategorijų filtrai
tinklaraščio įrašų tinklelis
puslapiuota navigacija
Išdėstymas yra visiškai pritaikomas ir optimizuotas tiek staliniams, tiek mobiliesiems įrenginiams.
Tinklaraščio įrašo puslapis
Kiekvienas straipsnis pasiekiamas dinaminiu maršrutu:
/blog/[slug]
Tinklaraščio įrašo puslapyje yra keletas naudingų funkcijų:
visas straipsnio turinys
automatinis turinys
numatomas skaitymo laikas
socialinių tinklų bendrinimo mygtukai
susijusių įrašų pasiūlymai
Šios funkcijos padeda sukurti profesionalią skaitymo patirtį, panašią į šiuolaikines tinklaraščių platformas.
Kategorijos puslapiai
Vartotojai gali naršyti įrašus pagal kategorijas.
Maršruto pavyzdys:
/blog/category/[slug]
Ši funkcija leidžia skaitytojams tyrinėti turinį konkrečiomis temomis.
Paieškos funkcija
Projekte yra integruotas paieškos puslapis:
/search
Paieška palaiko:
rezultatai realiuoju laiku
atšokęs įvestis
paieška pagal pavadinimus, ištraukas ir žymas
Tai pagerina naudojimo paprastumą ir padeda vartotojams greitai rasti reikiamą turinį.
Apie ir kontaktų puslapius
Projekte taip pat yra papildomų puslapių, dažnai randamų profesiniuose tinklaraščiuose.
Apie puslapį
Puslapyje „Apie“ pristatoma:
komanda
projekto istorija
pagrindinės vertybės
Kontaktų puslapis
Kontaktų puslapyje yra visiškai patvirtinta forma su:
formos patvirtinimas
pranešimai apie skrebučius
sėkmės ir klaidų atsiliepimai
Tamsaus režimo palaikymas
Tinklaraštis palaiko tamsųjį ir šviesųjį režimus .
Funkcijos apima:
automatinis sistemos temos aptikimas
rankinis perjungimas
temos išlaikymas naudojant vietinę saugyklą
Netikras API sluoksnis(kūrimas be serverio)
Viena įdomiausių šio projekto dalių yra jo „Fake API“ sistema .
Užuot skambinusi į tikrą serverį, programa naudoja „Axios“ perėmėjus, kad imituotų REST API atsakymus.
Kaip veikia netikra API
„Axios“ egzempliorius sukuriamas:
src/services/api-client.ts
Kai aplinkos kintamasis įjungtas:
NEXT_PUBLIC_USE_MOCK_API=true
Užklausos yra perimamos prieš pasiekiant tinklą.
Netikri tvarkytojai grąžina netikrus atsakymus su realiais vėlavimais(200–600 ms).
Atsakymai elgiasi kaip tikri API atsakymai.
Bandomieji duomenys saugomi:
src/mocks/
Įskaitant:
pavyzdiniai įrašai
autoriai
kategorijos
Galimi API galiniai taškai
Mock API palaiko kelis galinius taškus:
| Metodas | Galutinis taškas | Aprašymas |
|---|---|---|
| GAUTI | /įrašai | Puslapiuoti tinklaraščio įrašai |
| GAUTI | /įrašai/rekomenduojami | Rekomenduojami įrašai |
| GAUTI | /įrašai/:šliužas | Vienas tinklaraščio įrašas |
| GAUTI | /kategorijos | Kategorijų sąrašas |
| GAUTI | /autoriai | Autorių sąrašas |
| PAŠTAS | /kontaktas | Pateikti kontaktinę formą |
Technologijų rinkinys
Projekte naudojamas modernus front-end stekas.
| Sluoksnis | Technologijos |
|---|---|
| Sistema | Next.js 15 |
| UI biblioteka | Reaguoti 19 |
| Kalba | TypeScript |
| Stilius | „Tailwind CSS 4“ |
| HTTP klientas | Axios |
| Piktogramos | Lucide React |
| Pūkeliai | ESLint |
| Formatavimas | Gražesnis |
Šis krūvis suteikia:
stiprus tipo saugumas
prižiūrima architektūra
moderni kūrėjo patirtis
Projekto struktūra
Projekto struktūra atitinka švarią ir keičiamo dydžio architektūrą.
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
ProgramėlėRouter
Kataloge appyra visi programų maršrutai.
Pavyzdžiai:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
Tai atitinka „Next.js“ programų Routerarchitektūrą, pristatytą naujesnėse „Next.js“ versijose.
Komponentai
Vartotojo sąsaja componentsyra suskirstyta į logines grupes:
components/layout
components/common
components/blog
Ši struktūra užtikrina, kad vartotojo sąsajos kodas būtų tvarkingas ir lengviau prižiūrimas.
Paslaugų sluoksnis
Aplanke servicesyra su API susijusi logika:
API kliento konfigūracija
pašto tarnyba
kategorijos paslauga
kontaktinės formos paslauga
Šis sluoksnis atskiria duomenų gavimo logiką nuo vartotojo sąsajoscomponents, o tai pagerina mastelio keitimą.
Diegimo vadovas
Reikalavimai
Prieš pradėdami įsitikinkite, kad turite:
„Node.js 18“ arba naujesnė versija
npm, siūlai arba pnpm
Klonuoti saugyklą
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
Įdiegti priklausomybes
npm install
Konfigūruoti aplinkos kintamuosius
cp .env.example .env
Paleiskite kūrimo serverį
npm run dev
Atidarykite naršyklę ir apsilankykite:
http://localhost:3000
Galimi scenarijai
| Komanda | Aprašymas |
|---|---|
| npm paleisti dev | Paleisti kūrimo serverį |
| npm paleidimo kūrimas | Sukurti gamybos versiją |
| npm vykdymo pradžia | Paleisti gamybinį serverį |
| npm paleisti pūką | Paleisti ESLint |
| npm vykdymo formatas | Formatuokite kodą su „Prettier“ |
| npm vykdymo tipo patikrinimas | Vykdyti „TypeScript“ patikrinimus |
Perėjimas prie tikros API
Jei norite prijungti projektą prie tikros vidinės API sąsajos, atlikite šiuos veiksmus.
1 veiksmas: išjunkite bandomąją API
Redaguoti .envfailą:
NEXT_PUBLIC_USE_MOCK_API=false
2 veiksmas: nustatykite API bazinį URL
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
3 veiksmas: suderinkite duomenų tipus
Įsitikinkite, kad jūsų vidinė API grąžina duomenis, atitinkančius „TypeScript“ apibrėžimus:
src/types/index.ts
Papildomų kodo pakeitimų nereikia.
Turinio tinkinimas
Bandomojo turinio redagavimas galimas viduje:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
Tai leidžia kūrėjams greitai pritaikyti demonstracinį turinį.
Temos ir vartotojo sąsajos pritaikymas
Visuotinį stilių galima rasti:
src/app/globals.css
Projekte naudojami šie šriftai:
DM Sans
JetBrains Mono
Galite modifikuoti stilius arba pakeisti šriftus, atsižvelgdami į savo dizaino reikalavimus.
Išvada
„NextJS Base Blog“ yra galingas ir modernus pradinis šablonas tinklaraščiui kurti naudojant „Next.js“.
Pagrindiniai projekto privalumai:
šiuolaikinių technologijų rinkinys
švari architektūra
bandomoji API plėtrai
lengva integracija su realiomis vidinėmis API sąsajomis
reaguojanti vartotojo sąsaja ir modernios funkcijos
Jei kuriate tinklaraštį, kūrėjo svetainę ar turinio platformą naudodami „Next.js“, ši saugykla gali sutaupyti daug kūrimo laiko.
Naršykite šaltinio kodą čia: https://github.com/bfotool/nextjs-base-blog