close

Blog ɗin Tushen JS na Gaba: Sabon Blog ɗin Zamani Tare da Next.js 15 & Tailwind

Idan kana neman samfurin fara shafin yanar gizo na zamani wanda aka gina da Next.js, aikin NextJS Base Blog kyakkyawan wuri ne na farawa. Cikakken manhajar shafin yanar gizo ne mai buɗewa wanda aka gina tare da Next.js 15, React 19, TypeScript, da Tailwind CSS 4 .

Aikin yana samar da ingantaccen tsarin gini, UI na zamani components, da kuma tsarin API na gwaji, wanda hakan ya sa ya dace da masu haɓaka shafin yanar gizo waɗanda ke son gina shafin yanar gizo cikin sauri ba tare da kafa wani shafin baya ba.

Ma'ajiyar GitHub: https://github.com/bfotool/nextjs-base-blog

Wannan aikin yana da amfani musamman ga:

  • Masu haɓaka manhajar Next.jsRouter

  • Gina shafin yanar gizo ko shafin yanar gizo cikin sauri

  • Ƙirƙirar aikin boilerplate na Next.js

  • Haɓaka fasalulluka na UI kafin haɗa ainihin API na baya

Bayanin Aiki

An tsara NextJS Base Blog a matsayin samfurin blog mai shirye-shiryen samarwa tare da fasaloli da yawa na gama gari da ake samu a gidajen yanar gizo na zamani.

Aikin ya haɗa da:

  • shafin farko tare da rubuce-rubuce masu fasali

  • shafukan rubutun blog

  • tace rukuni

  • bincike na cikakken rubutu

  • shafi na shafi

  • teburin abubuwan da ke ciki

  • rubuce-rubuce masu alaƙa

  • jigon duhu/mai haske

Ɗaya daga cikin ɓangarorin da suka fi ban sha'awa na aikin shine Fake API Layer, wanda ke kwaikwayon REST API ta amfani da Axios interceptors. Wannan yana bawa masu haɓakawa damar ginawa da gwada aikace-aikacen ba tare da buƙatar uwar garken baya ba .

Mahimman Sifofi

Shafin Farko

Shafin farko yana nuna wasu muhimman sassan:

  • sakon gwarzo da aka nuna

  • matattarar rukuni

  • grid na rubuce-rubucen blog

  • kewayawa mai shafi

Tsarin yana da cikakken amsawa kuma an inganta shi don na'urorin tebur da na hannu.

Shafin Sakon Blog

Ana iya samun damar kowane labarin ta hanyar hanya mai ƙarfi:

/blog/[slug]

Shafin rubutun shafin yanar gizo ya ƙunshi wasu fasaloli masu amfani:

  • cikakken abun cikin labarin

  • Teburin abubuwan da ke ciki ta atomatik

  • lokacin karatu da aka kiyasta

  • Maɓallan raba zamantakewa

  • Shawarwari kan rubuce-rubuce masu alaƙa

Waɗannan fasaloli suna taimakawa wajen ƙirƙirar ƙwarewar karatu ta ƙwararru kamar dandamalin rubutun ra'ayin kanka a yanar gizo na zamani.

Shafukan Nau'i

Masu amfani za su iya bincika rubuce-rubuce ta rukuni.

Misalin hanya:

/blog/category/[slug]

Wannan fasalin yana bawa masu karatu damar bincika abubuwan da ke cikin takamaiman batutuwa.

Ayyukan Bincike

Aikin ya haɗa da shafin bincike da aka gina a ciki:

/search

Tallafin bincike:

  • sakamako na ainihin lokaci

  • shigarwar da aka soke

  • bincika taruka, ɓangarorin bayanai, da alamomi

Wannan yana inganta amfani kuma yana taimaka wa masu amfani su sami abubuwan da suka dace da sauri.

Shafukan Sadarwa Game da Mu

Aikin ya kuma haɗa da ƙarin shafuka da aka saba samu a shafukan yanar gizo na ƙwararru.

Game da Shafi

Shafin Game da Yana gabatar da:

  • tawagar

  • labarin aikin

  • manyan ƙimomin

Shafin Tuntuɓa

Shafin Tuntuɓa ya ƙunshi cikakken fom mai inganci tare da:

  • Tabbatar da fom

  • sanarwar gasa burodi

  • nasara da kuma ra'ayoyin kuskure

Tallafin Yanayin Duhu

Shafin yanar gizon yana goyan bayan yanayin duhu da yanayin haske .

Fasaloli sun haɗa da:

  • Gano jigon tsarin atomatik

  • kunna hannu

  • juriyar jigo ta amfani da localStorage

Tsarin API na karya(Ci gaba ba tare da Backend ba)

Ɗaya daga cikin mafi ban sha'awa na wannan aikin shine tsarin API na karya .

Maimakon kiran ainihin sabar, aikace-aikacen yana amfani da masu hana Axios don kwaikwayon amsoshin REST API.

Yadda API ɗin Karya Ke Aiki

  1. An ƙirƙiri misalin Axios a cikin:

src/services/api-client.ts

  1. Lokacin da aka kunna canjin muhalli:

NEXT_PUBLIC_USE_MOCK_API=true

  1. Ana katse buƙatun kafin isa ga hanyar sadarwar.

  2. Masu sarrafa zane-zane suna mayar da martani na karya tare da jinkiri na gaske(200–600 ms).

  3. Amsoshin suna aiki kamar ainihin amsoshin API.

Ana adana bayanan gwaji a cikin:

src/mocks/

Ciki har da:

  • samfuran sakonni

  • marubuta

  • rukunoni

Ƙarshen API da ake da su

Tsarin API ɗin yana goyan bayan wasu maƙasudai:

Hanyar ƙarshen wuri Bayani
SAMU /sakonnin Rubuce-rubucen shafin yanar gizo masu shafi
SAMU /sakonnin/an nuna Rubuce-rubucen da aka fi so
SAMU /sakonni/:ƙazanta Sakon rubutu guda ɗaya
SAMU /rukuni Jerin rukuni
SAMU /marubuta Jerin Marubuta
POST /lambobin sadarwa Aika fom ɗin tuntuɓa

Tarin Fasaha

Aikin yana amfani da tsarin zamani na frontend.

Layer Fasaha
Tsarin tsari Na gaba.js 15
Laburaren UI Amsa 19
Harshe Rubutun Nau'i
Salo Tailwind CSS 4
Abokin Ciniki na HTTP Axios
Gumaka Lucide React
Rufin rufi ESLint
Tsarin Mafi kyau

Wannan tarin yana samar da:

  • aminci mai ƙarfi na nau'in

  • gine-ginen da za a iya gyarawa

  • ƙwarewar masu haɓaka zamani

Tsarin Aiki

Tsarin aikin yana bin tsarin gini mai tsabta da girma.

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

ManhajaRouter

Littafin appjagora ya ƙunshi dukkan hanyoyin aikace-aikace.

Misalai:

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

Wannan ya biyo bayan tsarin Manhajar Next.jsRouter da aka gabatar a cikin sabbin sigogin Next.js.

Sassan

componentsAn tsara UI zuwa ƙungiyoyi masu ma'ana:

components/layout 
components/common 
components/blog

Wannan tsarin yana sa lambar UI ta kasance mai tsari kuma mai sauƙin kulawa.

Tsarin Ayyuka

Fayil ɗin servicesya ƙunshi dabaru masu alaƙa da API:

  • Tsarin abokin ciniki na API

  • hidimar gidan waya

  • sabis na rukuni

  • sabis na fom ɗin tuntuɓar

Wannan matakin yana raba dabaru na tattara bayanai daga UIcomponents, wanda ke inganta haɓaka aiki.

Jagorar Shigarwa

Bukatu

Kafin fara aiki, tabbatar kana da:

  • Node.js 18 ko sama da haka

  • npm, yarn, ko pnpm

Clone da Ma'ajiyar

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

Shigar da Dogara

npm install

Saita Canjin Muhalli

cp .env.example .env

Fara Sabar Ci Gaban

npm run dev

Buɗe burauzarka ka ziyarci:

http://localhost:3000

Rubuce-rubucen da ake da su

Umarni Bayani
npm gudu dev Fara sabar haɓakawa
gina gudu na npm Ƙirƙiri gina samarwa
fara gudu na npm Fara sabar samarwa
npm gudu lint Gudanar da ESLint
tsarin gudu na npm Tsarin lambar tare da Prettier
duba nau'in gudu na npm Gudanar da duba TypeScript

Canjawa zuwa API na Gaskiya

Idan kana son haɗa aikin zuwa ainihin API na baya, bi waɗannan matakan.

Mataki na 1: Kashe Mock API

Shirya .envfayil ɗin:

NEXT_PUBLIC_USE_MOCK_API=false

Mataki na 2: Saita URL ɗin Tushen API

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

Mataki na 3: Daidaita Nau'in Bayanai

Tabbatar cewa API ɗinka na baya ya dawo da bayanai daidai da ma'anar TypeScript a cikin:

src/types/index.ts

Ba a buƙatar ƙarin canje-canjen lambar ba.

Keɓance Abun Ciki

Ana iya gyara abubuwan da aka gyara a cikin waɗannan sharuɗɗan:

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

Wannan yana bawa masu haɓaka damar tsara abubuwan gwaji cikin sauri.

Keɓance Jigo da UI

Za a iya samun salon duniya a cikin:

src/app/globals.css

Aikin yana amfani da waɗannan fonts:

  • DM Sans

  • JetBrains Mono

Kuna iya canza salo ko maye gurbin fonts dangane da buƙatun ƙira.

Kammalawa

Blog ɗin NextJS Base samfuri ne mai ƙarfi kuma na zamani don gina shafin yanar gizo tare da Next.js.

Manyan fa'idodin aikin sun haɗa da:

  • tarin fasahar zamani

  • tsarin gini mai tsabta

  • Samfurin API don haɓakawa

  • haɗin kai mai sauƙi tare da ainihin APIs na baya

  • UI mai amsawa da fasalulluka na zamani

Idan kana gina shafin yanar gizo, gidan yanar gizo na masu haɓakawa, ko dandamalin abun ciki tare da Next.js, wannan wurin ajiyar bayanai zai iya ceton maka lokaci mai mahimmanci na haɓakawa.

Bincika lambar tushe a nan: https://github.com/bfotool/nextjs-base-blog