close

Blogu ya Msingi ya NextJS: Kianzishaji cha Blogu cha Kisasa chenye Next.js 15 na Tailwind

Ikiwa unatafuta kiolezo cha kisasa cha kuanzisha blogu kilichojengwa kwa kutumia Next.js, mradi wa NextJS Base Blogu ni sehemu bora ya kuanzia. Ni programu kamili ya blogu huria iliyojengwa kwa kutumia Next.js 15, React 19, TypeScript, na Tailwind CSS 4 .

Mradi huu hutoa usanifu safi, kiolesura cha kisasa components, na safu ya API ya majaribio, na kuifanya iwe bora kwa watengenezaji wa blogu wanaotaka kujenga blogu haraka bila kuweka msingi.

Hifadhi ya GitHub: https://github.com/bfotool/nextjs-base-blog

Mradi huu ni muhimu sana kwa:

  • Wasanidi programu wanajifunza Programu ya Next.jsRouter

  • Kujenga blogu au tovuti ya maudhui haraka

  • Kuunda mradi wa Next.js boilerplate

  • Kuendeleza vipengele vya UI kabla ya kuunganisha API halisi ya nyuma

Muhtasari wa Mradi

Blogu ya NextJS Base imeundwa kama kiolezo cha blogu kinachoweza kutayarishwa kwa ajili ya uzalishaji chenye vipengele vingi vya kawaida vinavyopatikana katika tovuti za kisasa za maudhui.

Mradi huo unajumuisha:

  • ukurasa wa nyumbani wenye machapisho yaliyoangaziwa

  • kurasa za machapisho ya blogu

  • kuchuja kategoria

  • utafutaji wa maandishi kamili

  • kurasa

  • jedwali la yaliyomo

  • machapisho yanayohusiana

  • mandhari nyeusi/nyepesi

Mojawapo ya sehemu za kuvutia zaidi za mradi huo ni Layer Fake API, ambayo huiga REST API kwa kutumia vizuizi vya Axios. Hii inaruhusu watengenezaji kujenga na kujaribu programu bila kuhitaji seva ya nyuma .

Vipengele Muhimu

Ukurasa wa nyumbani

Ukurasa wa nyumbani unaonyesha sehemu kadhaa muhimu:

  • chapisho la shujaa lililoangaziwa

  • vichujio vya kategoria

  • gridi ya machapisho ya blogu

  • urambazaji uliowekwa kwenye kurasa

Mpangilio unajibu kikamilifu na umeboreshwa kwa vifaa vya mezani na simu.

Ukurasa wa Machapisho ya Blogu

Kila makala inapatikana kupitia njia inayobadilika:

/blog/[slug]

Ukurasa wa machapisho ya blogu una vipengele kadhaa muhimu:

  • maudhui kamili ya makala

  • jedwali la yaliyomo kiotomatiki

  • muda unaokadiriwa wa kusoma

  • vitufe vya kushiriki kijamii

  • mapendekezo ya machapisho yanayohusiana

Vipengele hivi husaidia kuunda uzoefu wa kitaalamu wa kusoma sawa na majukwaa ya kisasa ya kublogi.

Kurasa za Kategoria

Watumiaji wanaweza kuvinjari machapisho kwa kategoria.

Mfano wa njia:

/blog/category/[slug]

Kipengele hiki kinawaruhusu wasomaji kuchunguza maudhui ndani ya mada maalum.

Utendaji Kazi wa Utafutaji

Mradi huu unajumuisha ukurasa wa utafutaji uliojengewa ndani:

/search

Utafutaji unaunga mkono:

  • matokeo ya wakati halisi

  • ingizo lililokataliwa

  • kutafuta katika vichwa, dondoo, na lebo

Hii inaboresha urahisi wa matumizi na husaidia watumiaji kupata maudhui yanayofaa haraka.

Kurasa za Kuhusu na Mawasiliano

Mradi huu pia unajumuisha kurasa za ziada zinazopatikana kwa kawaida kwenye blogu za kitaalamu.

Kuhusu Ukurasa

Ukurasa wa Kuhusu unatanguliza:

  • timu

  • hadithi ya mradi

  • thamani kuu

Ukurasa wa Mawasiliano

Ukurasa wa Mawasiliano unajumuisha fomu iliyothibitishwa kikamilifu na:

  • uthibitishaji wa fomu

  • arifa za mkate wa toast

  • maoni ya mafanikio na makosa

Usaidizi wa Hali Nyeusi

Blogu hii inasaidia hali ya giza na hali ya mwanga .

Vipengele ni pamoja na:

  • kugundua mandhari ya mfumo kiotomatiki

  • kibadilishaji cha mkono

  • Uendelevu wa mandhari kwa kutumia localStorage

Safu Bandia ya API(Uundaji Bila Sehemu ya Nyuma)

Mojawapo ya sehemu za kuvutia zaidi za mradi huu ni mfumo wake wa API bandia .

Badala ya kuita seva halisi, programu hutumia vizuizi vya Axios kuiga majibu ya REST API.

Jinsi API Bandia Inavyofanya Kazi

  1. Mfano wa Axios umeundwa katika:

src/services/api-client.ts

  1. Wakati kigezo cha mazingira kinapowezeshwa:

NEXT_PUBLIC_USE_MOCK_API=true

  1. Maombi huingiliwa kabla ya kufikia mtandao.

  2. Washughulikiaji wa majaribio hurudisha majibu bandia yenye ucheleweshaji halisi(200–600 ms).

  3. Majibu hutenda kama majibu halisi ya API.

Data ya majaribio huhifadhiwa katika:

src/mocks/

Ikijumuisha:

  • machapisho ya sampuli

  • waandishi

  • kategoria

Sehemu za Mwisho za API Zinazopatikana

API ya majaribio inasaidia sehemu kadhaa za mwisho:

Mbinu Sehemu ya Mwisho Maelezo
PATA /machapisho Machapisho ya blogu yaliyowekwa kwenye kurasa
PATA /machapisho/yaliyoangaziwa Machapisho yaliyoangaziwa
PATA /machapisho/:koa Chapisho moja la blogu
PATA /kategoria Orodha ya kategoria
PATA /waandishi Orodha ya waandishi
POST /wasiliana Tuma fomu ya mawasiliano

Mrundiko wa Teknolojia

Mradi huu unatumia mrundiko wa kisasa wa sehemu ya mbele.

Safu Teknolojia
Mfumo Inayofuata.js 15
Maktaba ya UI Mwitikio 19
Lugha Hati ya Aina
Urembo Tailwind CSS 4
Mteja wa HTTP Axios
Aikoni Mwitikio wa Lucide
Kuweka kitambaa ESLint
Uumbizaji Mrembo zaidi

Mrundikano huu hutoa:

  • usalama wa aina kali

  • usanifu unaoweza kudumishwa

  • uzoefu wa kisasa wa msanidi programu

Muundo wa Mradi

Muundo wa mradi hufuata usanifu safi na unaoweza kupanuliwa.

src/ 
├── app/ 
├── components/ 
├── services/ 
├── mocks/ 
├── contexts/ 
├── hooks/ 
├── types/ 
└── lib/

ProgramuRouter

Saraka appina njia zote za programu.

Mifano:

app/page.tsx 
app/blog/[slug]/page.tsx 
app/search/page.tsx

Hii inafuatia usanifu wa Programu ya Next.jsRouter ulioletwa katika matoleo mapya ya Next.js.

Vipengele

UI componentsimepangwa katika makundi ya kimantiki:

components/layout 
components/common 
components/blog

Muundo huu huweka msimbo wa UI uliopangwa na rahisi kudumisha.

Safu ya Huduma

Folda servicesina mantiki inayohusiana na API:

  • Usanidi wa mteja wa API

  • huduma ya posta

  • huduma ya kategoria

  • huduma ya fomu ya mawasiliano

Safu hii hutenganisha mantiki ya kupata data kutoka kwa UIcomponents, ambayo huboresha uwezo wa kupanuka.

Mwongozo wa Usakinishaji

Mahitaji

Kabla ya kuanza, hakikisha una:

  • Node.js 18 au zaidi

  • npm, uzi, au pnpm

Clone Hifadhi

git clone https://github.com/bfotool/nextjs-base-blog.git 
cd nextjs-base-blog

Utegemezi wa Usakinishaji

npm install

Sanidi Vigezo vya Mazingira

cp .env.example .env

Anzisha Seva ya Usanidi

npm run dev

Fungua kivinjari chako na utembelee:

http://localhost:3000

Hati Zinazopatikana

Amri Maelezo
npm endesha usanidi Anza seva ya usanidi
npm endesha ujenzi Unda muundo wa uzalishaji
kuanza kwa kukimbia kwa npm Anza seva ya uzalishaji
npm kukimbia lint Endesha ESLint
umbizo la kukimbia la npm Fomati ya msimbo kwa kutumia Prettier
npm kukimbia aina-check Endesha ukaguzi wa TypeScript

Kubadilisha hadi API Halisi

Ukitaka kuunganisha mradi na API halisi ya nyuma, fuata hatua hizi.

Hatua ya 1: Zima API ya Mock

Hariri .envfaili:

NEXT_PUBLIC_USE_MOCK_API=false

Hatua ya 2: Weka URL ya Msingi wa API

NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com

Hatua ya 3: Linganisha Aina za Data

Hakikisha API yako ya nyuma inarudisha data inayolingana na ufafanuzi wa TypeScript katika:

src/types/index.ts

Hakuna mabadiliko ya ziada ya msimbo yanayohitajika.

Kubinafsisha Maudhui

Maudhui ya majaribio yanaweza kuhaririwa ndani:

src/mocks/posts.ts 
src/mocks/categories.ts 
src/mocks/authors.ts

Hii inaruhusu watengenezaji wa programu kubinafsisha maudhui ya onyesho haraka.

Kubinafsisha Mandhari na UI

Mitindo ya kimataifa inaweza kupatikana katika:

src/app/globals.css

Mradi huu unatumia fonti zifuatazo:

  • DM Sans

  • JetBrains Mono

Unaweza kurekebisha mitindo au kubadilisha fonti kulingana na mahitaji yako ya muundo.

Hitimisho

Blogu ya NextJS Base ni kiolezo chenye nguvu na cha kisasa cha kuanzisha blogu kwa kutumia Next.js.

Faida kuu za mradi ni pamoja na:

  • mrundikano wa teknolojia ya kisasa

  • usanifu safi

  • API ya majaribio kwa ajili ya maendeleo

  • ujumuishaji rahisi na API halisi za nyuma

  • UI inayoitikia na vipengele vya kisasa

Ikiwa unaunda blogu, tovuti ya msanidi programu, au jukwaa la maudhui ukitumia Next.js, hazina hii inaweza kukuokoa muda mwingi wa uundaji.

Chunguza msimbo chanzo hapa: https://github.com/bfotool/nextjs-base-blog