Yen sampeyan nggoleki cithakan pambuka blog modern sing digawe nganggo Next.js, proyek NextJS Base Blog minangka titik wiwitan sing apik banget. Iki minangka aplikasi blog sumber terbuka kanthi fitur lengkap sing digawe nganggo Next.js 15, React 19, TypeScript, lan Tailwind CSS 4 .
Proyèk iki nyedhiyakaké arsitektur sing resik, UI modern components, lan lapisan API tiruan, saéngga cocog kanggo para pangembang sing pengin mbangun blog kanthi cepet tanpa nyetel backend.
Repositori GitHub: https://github.com/bfotool/nextjs-base-blog
Proyek iki migunani banget kanggo:
Para pangembang sing lagi sinau Aplikasi Next.jsRouter
Nggawe blog utawa situs web konten kanthi cepet
Nggawe proyek boilerplate Next.js
Ngembangake fitur UI sadurunge nyambungake API backend sing nyata
Ringkesan Proyek
NextJS Base Blog dirancang minangka cithakan blog sing siap produksi kanthi akeh fitur umum sing ditemokake ing situs web konten modern.
Proyèk iki kalebu:
kaca ngarep kanthi kiriman unggulan
kaca postingan blog
panyaringan kategori
panelusuran teks lengkap
paginasi
daftar isi
kiriman sing gegandhengan
tema peteng/padhang
Salah sawijining bagean sing paling menarik saka proyèk iki yaiku Fake API Layer, sing nyimulasikake REST API nggunakake interceptor Axios. Iki ngidini para pangembang mbangun lan nguji aplikasi tanpa mbutuhake server backend .
Fitur Utama
Kaca ngarep
Halaman ngarep nampilake sawetara bagean penting:
postingan pahlawan unggulan
filter kategori
kothak postingan blog
navigasi sing di-pagenasi
Tata letak iki responsif banget lan dioptimalake kanggo piranti desktop lan seluler.
Kaca Posting Blog
Saben artikel bisa diakses liwat rute dinamis:
/blog/[slug]
Kaca postingan blog iki nduweni sawetara fitur sing migunani:
isi artikel lengkap
daftar isi otomatis
wektu maca sing diestimasikake
tombol enggo bareng ing media sosial
saran postingan sing gegandhengan
Fitur-fitur iki mbantu nggawe pengalaman maca profesional sing padha karo platform blog modern.
Kaca Kategori
Pangguna bisa browsing kiriman miturut kategori.
Tuladha rute:
/blog/category/[slug]
Fitur iki ngidini para pamaca njelajah konten ing topik tartamtu.
Fungsi Panelusuran
Proyèk iki kalebu kaca panelusuran bawaan:
/search
Dhukungan panelusuran:
asil wektu nyata
input sing dibatalake
nggoleki ing antarane judhul, kutipan, lan tag
Iki nambah kegunaan lan mbantu pangguna nemokake konten sing relevan kanthi cepet.
Babagan lan Kaca Kontak
Proyèk iki uga kalebu kaca tambahan sing umum ditemokaké ing blog profesional.
Babagan Kaca
Kaca Babagan ngenalake:
tim kasebut
critane proyek kasebut
nilai-nilai inti
Kaca Kontak
Kaca Kontak kalebu formulir sing wis divalidasi kanthi lengkap karo:
validasi formulir
kabar roti panggang
umpan balik sukses lan kesalahan
Dhukungan Mode Peteng
Blog iki ndhukung mode peteng lan mode padhang .
Fitur-fitur kasebut kalebu:
deteksi tema sistem otomatis
saklar manual
persistensi tema nggunakake localStorage
Lapisan API Palsu(Pangembangan Tanpa Backend)
Salah sawijining bagean sing paling menarik saka proyèk iki yaiku sistem API Palsu .
Tinimbang nelpon server nyata, aplikasi iki nggunakake pencegat Axios kanggo simulasi respon REST API.
Cara Kerja API Palsu
Instansi Axios digawe ing:
src/services/api-client.ts
Nalika variabel lingkungan diaktifake:
NEXT_PUBLIC_USE_MOCK_API=true
Panjaluk dicegat sadurunge tekan jaringan.
Penangan tiruan ngasilake respon palsu kanthi wektu tundha sing realistis(200–600 ms).
Tanggepan tumindak kaya tanggapan API nyata.
Data tiruan disimpen ing:
src/mocks/
Kalebu:
conto postingan
para penulis
kategori
Titik Akhir API sing Kasedhiya
API tiruan ndhukung sawetara titik pungkasan:
| Metode | Titik pungkasan | Katrangan |
|---|---|---|
| ENTUK | /postingan | Kiriman blog sing di-pagenasi |
| ENTUK | /kiriman/unggulan | Kiriman unggulan |
| ENTUK | /postingan/:slug | Posting blog tunggal |
| ENTUK | /kategori | Daftar kategori |
| ENTUK | /penulis | Daftar penulis |
| POSTING | /kontak | Kirim formulir kontak |
Tumpukan Teknologi
Proyèk iki migunakaké tumpukan frontend modern.
| Lapisan | Teknologi |
|---|---|
| Kerangka | Sabanjure.js 15 |
| Perpustakaan UI | Reaksi 19 |
| Basa | TypeScript |
| Gaya | CSS Tailwind 4 |
| Klien HTTP | Aksios |
| Ikon | Reaksi Lucide |
| Linting | ESLint |
| Formatting | Luwih ayu |
Tumpukan iki nyedhiyakake:
keamanan tipe sing kuwat
arsitektur sing bisa dipertahankan
pengalaman pangembang modern
Struktur Proyek
Struktur proyèk iki ngetutaké arsitèktur sing resik lan bisa diskalakaké.
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
AplikasiRouter
Direktori kasebut appngemot kabeh rute aplikasi.
Tuladhane:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
Iki ngetutake arsitektur Aplikasi Next.jsRouter sing dikenalake ing versi Next.js sing luwih anyar.
Komponen
UI componentsdiatur dadi klompok logis:
components/layout
components/common
components/blog
Struktur iki njaga kode UI tetep teratur lan luwih gampang dirawat.
Lapisan Layanan
Folder iki servicesngemot logika sing ana gandhengane karo API:
Konfigurasi klien API
layanan pos
layanan kategori
layanan formulir kontak
Lapisan iki misahake logika njupuk data saka UIcomponents, sing ningkatake skalabilitas.
Pandhuan Instalasi
Syarat
Sadurunge miwiti, priksa manawa sampeyan duwe:
Node.js 18 utawa luwih anyar
npm, benang, utawa pnpm
Kloning Repositori
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
Ketergantungan Instalasi
npm install
Konfigurasi Variabel Lingkungan
cp .env.example .env
Miwiti Server Pangembangan
npm run dev
Bukak browser sampeyan lan bukak:
http://localhost:3000
Skrip sing Kasedhiya
| Komando | Katrangan |
|---|---|
| npm mbukak pangembang | Miwiti server pangembangan |
| mbangun npm | Nggawe bangunan produksi |
| npm miwiti mlaku | Miwiti server produksi |
| npm mbukak lint | Jalanake ESLint |
| format npm kanggo mlaku | Format kode nganggo Prettier |
| pamriksan jinis npm | Jalanake pamriksan TypeScript |
Ngalih menyang API Nyata
Yen sampeyan pengin nyambungake proyèk menyang API backend sing nyata, tindakake langkah-langkah iki.
Langkah 1: Nonaktifake Mock API
Sunting .envberkas iki:
NEXT_PUBLIC_USE_MOCK_API=false
Langkah 2: Setel URL Basis API
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
Langkah 3: Cocokake Jinis Data
Priksa manawa API backend sampeyan ngasilake data sing cocog karo definisi TypeScript ing:
src/types/index.ts
Ora perlu owah-owahan kode tambahan.
Ngatur Konten
Konten tiruan bisa diowahi ing njero:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
Iki ngidini para pangembang ngatur konten demo kanthi cepet.
Ngatur Tema lan UI
Gaya global bisa ditemokake ing:
src/app/globals.css
Proyèk iki migunakaké font ing ngisor iki:
DM Sans
JetBrains Mono
Sampeyan bisa ngowahi gaya utawa ngganti font gumantung saka kabutuhan desain sampeyan.
Dudutan
NextJS Base Blog kuwi cithakan pamula sing kuat lan modern kanggo mbangun blog nganggo Next.js.
Kauntungan utama saka proyek kasebut kalebu:
tumpukan teknologi modern
arsitektur sing resik
API tiruan kanggo pangembangan
integrasi sing gampang karo API backend nyata
UI responsif lan fitur modern
Yen sampeyan lagi nggawe blog, situs web pangembang, utawa platform konten nganggo Next.js, repositori iki bisa ngirit wektu pangembangan sing signifikan.
Jelajahi kode sumber ing kene: https://github.com/bfotool/nextjs-base-blog