Más teimpléad nua-aimseartha tosaithe blag atá tógtha le Next.js atá uait, is pointe tosaigh den scoth é tionscadal NextJS Base Blog. Is feidhmchlár blag foinse oscailte lánghnéitheach é atá tógtha le Next.js 15, React 19, TypeScript, agus Tailwind CSS 4 .
Cuireann an tionscadal ailtireacht ghlan, comhéadan úsáideora nua-aimseartha components, agus ciseal API bréige ar fáil, rud a fhágann go bhfuil sé oiriúnach do fhorbróirí ar mian leo blag a thógáil go tapa gan cúltaca a bhunú.
Stór GitHub: https://github.com/bfotool/nextjs-base-blog
Tá an tionscadal seo thar a bheith úsáideach do:
Forbróirí ag foghlaim an aip Next.jsRouter
Blag nó suíomh Gréasáin ábhair a thógáil go tapa
Ag cruthú tionscadail Next.js
Gnéithe UI a fhorbairt sula nasctar fíor-API cúil
Forbhreathnú ar an Tionscadal
Tá NextJS Base Blog deartha mar theimpléad blag atá réidh le haghaidh léiriúcháin le go leor gnéithe coitianta a fhaightear i suíomhanna gréasáin ábhair nua-aimseartha.
Áirítear leis an tionscadal:
leathanach baile le poist le feiceáil
leathanaigh poist bhlag
scagadh catagóire
cuardach téacs iomlán
leathanaigh
clár ábhair
poist ghaolmhara
téama dorcha/éadrom
Ceann de na codanna is suimiúla den tionscadal ná an Sraith API Bréige, a insamhlaíonn API REST ag baint úsáide as idircheapóirí Axios. Ligeann sé seo do fhorbróirí an feidhmchlár a thógáil agus a thástáil gan freastalaí cúil a bheith ag teastáil uathu .
Príomhghnéithe
Leathanach baile
Taispeántar roinnt rannóga tábhachtacha ar an leathanach baile:
post laochra le feiceáil
scagairí catagóire
eangach de phoist bhlag
nascleanúint leathanaigh
Tá an leagan amach lánfhreagrach agus optamaithe do ghléasanna deisce agus soghluaiste araon.
Leathanach Postála Blag
Tá rochtain ar gach alt trí bhealach dinimiciúil:
/blog/[slug]
Tá roinnt gnéithe úsáideacha ar leathanach na bpostálacha blag:
ábhar iomlán an ailt
clár ábhair uathoibríoch
am léitheoireachta measta
cnaipí comhroinnte sóisialta
moltaí poist ghaolmhara
Cuidíonn na gnéithe seo le taithí léitheoireachta ghairmiúil a chruthú cosúil le hardáin bhlagála nua-aimseartha.
Leathanaigh Chatagóire
Is féidir le húsáideoirí brabhsáil trí phoist de réir catagóire.
Bealach samplach:
/blog/category/[slug]
Ligeann an ghné seo do léitheoirí ábhar laistigh de thopaicí sonracha a iniúchadh.
Feidhmiúlacht Chuardaigh
Tá leathanach cuardaigh ionsuite sa tionscadal:
/search
Tacaíonn cuardaigh:
torthaí fíor-ama
ionchur díbhriste
ag cuardach trasna teidil, sleachta agus clibeanna
Feabhsaíonn sé seo inúsáidteacht agus cabhraíonn sé le húsáideoirí ábhar ábhartha a aimsiú go tapa.
Leathanaigh Maidir Linn agus Teagmhála
Áirítear leis an tionscadal leathanaigh bhreise a fhaightear go coitianta ar bhlaganna gairmiúla freisin.
Maidir leis an Leathanach
Tugann an leathanach Maidir Linn isteach:
an fhoireann
scéal an tionscadail
luachanna lárnacha
Leathanach Teagmhála
Tá foirm lánbhailíochtaithe ar an leathanach Teagmhála ina bhfuil:
bailíochtú foirme
fógraí tósta
aiseolas ratha agus earráide
Tacaíocht Mód Dorcha
Tacaíonn an blag le mód dorcha agus mód solais .
Áirítear leis na gnéithe seo a leanas:
braiteadh téama uathoibríoch córais
lascán láimhe
buanseasmhacht téama ag baint úsáide as localStorage
Sraith API Bréige(Forbairt Gan Backend)
Ceann de na codanna is suimiúla den tionscadal seo ná a chóras API bréige .
In ionad glaoch ar fhreastalaí fíor, úsáideann an feidhmchlár idircheapóirí Axios chun freagraí REST API a insamhladh.
Conas a Oibríonn an API Bréige
Cruthaítear cás Axios i:
src/services/api-client.ts
Nuair a bhíonn an athróg timpeallachta cumasaithe:
NEXT_PUBLIC_USE_MOCK_API=true
Déantar iarratais a thascradh sula sroicheann siad an líonra.
Tugann láimhseálaithe bréige freagraí bréige ar ais le moilleanna réadúla(200–600 ms).
Iompraíonn freagraí cosúil le freagraí API fíor.
Stóráiltear na sonraí bréige i:
src/mocks/
Lena n-áirítear:
poist shamplacha
údair
catagóirí
Críochphointí API atá ar Fáil
Tacaíonn an API bréige le roinnt críochphointí:
| Modh | Críochphointe | Cur síos |
|---|---|---|
| FAIGH | /poist | Poist bhlag leathanaighithe |
| FAIGH | /poist/le feiceáil | Poist le feiceáil |
| FAIGH | /poist/:seilide | Post blag aonair |
| FAIGH | /catagóirí | Liosta catagóirí |
| FAIGH | /údair | Liosta údar |
| POST | /teagmháil | Cuir isteach foirm teagmhála |
Cruach Teicneolaíochta
Úsáideann an tionscadal cruach tosaigh nua-aimseartha.
| Sraith | Teicneolaíocht |
|---|---|
| Creat | Next.js 15 |
| Leabharlann Chomhéadain | Imoibriú 19 |
| Teanga | Clóscríobh |
| Stíliú | Tailwind CSS 4 |
| Cliant HTTP | Axios |
| Deilbhíní | Lucide Imoibriú |
| Línteáil | ESLint |
| Formáidiú | Níos deise |
Soláthraíonn an cruach seo:
sábháilteacht de chineál láidir
ailtireacht inchothabháilte
taithí forbróra nua-aimseartha
Struchtúr an Tionscadail
Leanann struchtúr an tionscadail ailtireacht ghlan agus inscálaithe.
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
AipRouter
appTá na bealaí iarratais uile san eolaire.
Samplaí:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
Leanann sé seo ailtireacht an Aip Next.jsRouter a tugadh isteach i leaganacha níos nuaí de Next.js.
Comhpháirteanna
Tá an comhéadan úsáideora componentseagraithe i ngrúpaí loighciúla:
components/layout
components/common
components/blog
Coinníonn an struchtúr seo cód an chomhéadain úsáideora eagraithe agus níos éasca le cothabháil.
Sraith Seirbhísí
servicesTá loighic a bhaineann le API sa bhfillteán:
Cumraíocht cliant API
seirbhís poist
seirbhís chatagóir
seirbhís foirm teagmhála
Scarann an ciseal seo loighic aisghabhála sonraí ón gcomhéadan úsáideoracomponents, rud a fheabhsaíonn inscálaitheacht.
Treoir Suiteála
Riachtanais
Sula dtosaíonn tú, déan cinnte go bhfuil an méid seo a leanas agat:
Node.js 18 nó níos déanaí
npm, snáth, nó pnpm
Clónáil an Stór
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
Suiteáil Spleáchais
npm install
Cumraigh Athróga Comhshaoil
cp .env.example .env
Tosaigh an Freastalaí Forbartha
npm run dev
Oscail do bhrabhsálaí agus tabhair cuairt ar:
http://localhost:3000
Scripteanna atá ar Fáil
| Ordú | Cur síos |
|---|---|
| forbróir rith npm | Tosaigh freastalaí forbartha |
| tógáil rith npm | Cruthaigh tógáil táirgeachta |
| tús rith npm | Tosaigh freastalaí léiriúcháin |
| rith npm lint | Rith ESLint |
| formáid rith npm | Formáidigh cód le Prettier |
| seiceáil cineáil rith npm | Rith seiceálacha TypeScript |
Ag aistriú chuig API fíor
Más mian leat an tionscadal a nascadh le fíor-API cúil, lean na céimeanna seo.
Céim 1: Díchumasaigh API Bréige
Cuir an .envcomhad in eagar:
NEXT_PUBLIC_USE_MOCK_API=false
Céim 2: Socraigh an URL Bunúsach API
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
Céim 3: Cineálacha Sonraí a Mheaitseáil
Cinntigh go dtugann d’API cúil sonraí ar ais a mheaitseálann na sainmhínithe TypeScript i:
src/types/index.ts
Níl aon athruithe breise ar chód ag teastáil.
Ábhar a Saincheapadh
Is féidir ábhar bréige a chur in eagar taobh istigh:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
Ligeann sé seo d’fhorbróirí ábhar taispeána a shaincheapadh go tapa.
Téama agus Chomhéadan Úsáideora a Saincheapadh
Is féidir stíliú domhanda a fháil i:
src/app/globals.css
Úsáideann an tionscadal na clónna seo a leanas:
DM Sans
JetBrains Mono
Is féidir leat stíleanna a mhodhnú nó clónna a athsholáthar ag brath ar do riachtanais dearaidh.
Conclúid
Is teimpléad tosaithe cumhachtach agus nua-aimseartha é NextJS Base Blog chun blag a thógáil le Next.js.
I measc na bpríomhbhuntáistí a bhaineann leis an tionscadal tá:
cruach teicneolaíochta nua-aimseartha
ailtireacht ghlan
API bréige le haghaidh forbartha
comhtháthú éasca le fíor-APIanna cúil
Chomhéadan úsáideora sofhreagrach agus gnéithe nua-aimseartha
Más rud é go bhfuil tú ag tógáil blag, suíomh Gréasáin forbróra, nó ardán ábhair le Next.js, is féidir leis an stórlann seo am forbartha suntasach a shábháil duit.
Féach ar an gcód foinse anseo: https://github.com/bfotool/nextjs-base-blog