Jika Anda mencari template blog modern yang dibangun dengan Next.js, proyek NextJS Base Blog adalah titik awal yang sangat baik. Ini adalah aplikasi blog sumber terbuka berfitur lengkap yang dibangun dengan Next.js 15, React 19, TypeScript, dan Tailwind CSS 4 .
Proyek ini menyediakan arsitektur yang bersih, UI modern components, dan lapisan API tiruan, sehingga ideal bagi pengembang yang ingin membangun blog dengan cepat tanpa perlu menyiapkan backend.
Repositori GitHub: https://github.com/bfotool/nextjs-base-blog
Proyek ini sangat bermanfaat untuk:
Pengembang mempelajari Aplikasi Next.jsRouter
Membangun blog atau situs web konten dengan cepat.
Membuat proyek boilerplate Next.js
Mengembangkan fitur UI sebelum menghubungkan API backend yang sebenarnya.
Gambaran Umum Proyek
NextJS Base Blog dirancang sebagai template blog siap produksi dengan banyak fitur umum yang ditemukan di situs web konten modern.
Proyek ini meliputi:
halaman beranda dengan postingan unggulan
halaman posting blog
penyaringan kategori
pencarian teks lengkap
penomoran halaman
Daftar isi
postingan terkait
tema gelap/terang
Salah satu bagian paling menarik dari proyek ini adalah Fake API Layer, yang mensimulasikan REST API menggunakan interceptor Axios. Hal ini memungkinkan pengembang untuk membangun dan menguji aplikasi tanpa memerlukan server backend .
Fitur Utama
Beranda
Halaman beranda menampilkan beberapa bagian penting:
postingan pahlawan unggulan
filter kategori
sebuah grid postingan blog
navigasi berhalaman
Tata letaknya sepenuhnya responsif dan dioptimalkan untuk perangkat desktop dan seluler.
Halaman Posting Blog
Setiap artikel dapat diakses melalui rute dinamis:
/blog/[slug]
Halaman posting blog mencakup beberapa fitur yang bermanfaat:
isi artikel lengkap
daftar isi otomatis
perkiraan waktu membaca
tombol berbagi media sosial
saran posting terkait
Fitur-fitur ini membantu menciptakan pengalaman membaca profesional yang mirip dengan platform blogging modern.
Halaman Kategori
Pengguna dapat menelusuri postingan berdasarkan kategori.
Contoh rute:
/blog/category/[slug]
Fitur ini memungkinkan pembaca untuk menjelajahi konten dalam topik-topik tertentu.
Fungsi Pencarian
Proyek ini menyertakan halaman pencarian bawaan:
/search
Pencarian mendukung:
hasil waktu nyata
input yang telah dihilangkan efek pantulannya
mencari di seluruh judul, cuplikan, dan tag.
Hal ini meningkatkan kemudahan penggunaan dan membantu pengguna menemukan konten yang relevan dengan cepat.
Halaman Tentang Kami dan Kontak
Proyek ini juga mencakup halaman tambahan yang biasanya ditemukan di blog profesional.
Tentang Halaman
Halaman Tentang memperkenalkan:
tim
kisah proyek
nilai-nilai inti
Halaman Kontak
Halaman Kontak menyertakan formulir yang telah divalidasi sepenuhnya dengan:
validasi formulir
notifikasi pop-up
umpan balik keberhasilan dan kesalahan
Dukungan Mode Gelap
Blog ini mendukung mode gelap dan mode terang .
Fitur-fiturnya meliputi:
deteksi tema sistem otomatis
pengalih manual
penyimpanan tema menggunakan localStorage
Lapisan API Palsu(Pengembangan Tanpa Backend)
Salah satu bagian paling menarik dari proyek ini adalah sistem API palsunya .
Alih-alih memanggil server sungguhan, aplikasi ini menggunakan interceptor Axios untuk mensimulasikan respons API REST.
Cara Kerja API Palsu
Instansi Axios dibuat di:
src/services/api-client.ts
Saat variabel lingkungan diaktifkan:
NEXT_PUBLIC_USE_MOCK_API=true
Permintaan dicegat sebelum mencapai jaringan.
Simulasi penangan memberikan respons palsu dengan penundaan yang realistis(200–600 ms).
Respons yang diberikan berperilaku seperti respons API sungguhan.
Data tiruan tersebut disimpan di:
src/mocks/
Termasuk:
contoh postingan
penulis
kategori
Endpoint API yang Tersedia
API tiruan ini mendukung beberapa titik akhir:
| Metode | Titik akhir | Keterangan |
|---|---|---|
| MENDAPATKAN | /postingan | Postingan blog yang dipaginasi |
| MENDAPATKAN | /postingan/unggulan | Postingan unggulan |
| MENDAPATKAN | /posting/:slug | Satu postingan blog |
| MENDAPATKAN | /kategori | Daftar kategori |
| MENDAPATKAN | /penulis | Daftar penulis |
| POS | /kontak | Kirim formulir kontak |
Tumpukan Teknologi
Proyek ini menggunakan tumpukan frontend modern.
| Lapisan | Teknologi |
|---|---|
| Kerangka | Next.js 15 |
| Pustaka UI | Reaksi 19 |
| Bahasa | TypeScript |
| Penataan gaya | Tailwind CSS 4 |
| Klien HTTP | Axios |
| Ikon | Reaksi Lucid |
| Serat | ESLint |
| Pemformatan | Lebih cantik |
Tumpukan ini menyediakan:
keamanan tipe kuat
arsitektur yang mudah dipelihara
pengalaman pengembang modern
Struktur Proyek
Struktur proyek mengikuti arsitektur yang bersih dan mudah diskalakan.
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
AplikasiRouter
Direktori ini appberisi semua rute aplikasi.
Contoh:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
Ini mengikuti arsitektur Aplikasi Next.jsRouter yang diperkenalkan dalam versi Next.js yang lebih baru.
Komponen
UI componentsdiatur ke dalam kelompok-kelompok logis:
components/layout
components/common
components/blog
Struktur ini menjaga agar kode UI tetap terorganisir dan lebih mudah dipelihara.
Lapisan Layanan
Folder ini servicesberisi logika terkait API:
Konfigurasi klien API
layanan pos
layanan kategori
layanan formulir kontak
Lapisan ini memisahkan logika pengambilan data dari UIcomponents, yang meningkatkan skalabilitas.
Panduan Instalasi
Persyaratan
Sebelum memulai, pastikan Anda memiliki:
Node.js 18 atau yang lebih baru
npm, yarn, atau pnpm
Kloning Repositori
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
Instal Dependensi
npm install
Konfigurasi Variabel Lingkungan
cp .env.example .env
Mulai Server Pengembangan
npm run dev
Buka browser Anda dan kunjungi:
http://localhost:3000
Skrip yang Tersedia
| Memerintah | Keterangan |
|---|---|
| npm jalankan dev | Mulai server pengembangan |
| npm jalankan build | Buat build produksi. |
| npm jalankan mulai | Mulai server produksi |
| npm jalankan lint | Jalankan ESLint |
| npm run format | Format kode dengan Prettier |
| npm jalankan pemeriksaan tipe | Jalankan pemeriksaan TypeScript |
Beralih ke API Sejati
Jika Anda ingin menghubungkan proyek ke API backend sungguhan, ikuti langkah-langkah berikut.
Langkah 1: Nonaktifkan Mock API
Edit .envfile tersebut:
NEXT_PUBLIC_USE_MOCK_API=false
Langkah 2: Tetapkan URL Dasar API
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
Langkah 3: Mencocokkan Tipe Data
Pastikan API backend Anda mengembalikan data yang sesuai dengan definisi TypeScript di:
src/types/index.ts
Tidak diperlukan perubahan kode tambahan.
Menyesuaikan Konten
Konten contoh dapat diedit di dalam:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
Hal ini memungkinkan pengembang untuk dengan cepat menyesuaikan konten demo.
Mengkustomisasi Tema dan UI
Pengaturan gaya global dapat ditemukan di:
src/app/globals.css
Proyek ini menggunakan font berikut:
DM Sans
JetBrains Mono
Anda dapat memodifikasi gaya atau mengganti font sesuai dengan kebutuhan desain Anda.
Kesimpulan
NextJS Base Blog adalah template awal yang canggih dan modern untuk membangun blog dengan Next.js.
Keunggulan utama proyek ini meliputi:
tumpukan teknologi modern
arsitektur bersih
API tiruan untuk pengembangan
integrasi mudah dengan API backend sungguhan
UI responsif dan fitur modern
Jika Anda sedang membangun blog, situs web pengembang, atau platform konten dengan Next.js, repositori ini dapat menghemat waktu pengembangan Anda secara signifikan.
Jelajahi kode sumbernya di sini: https://github.com/bfotool/nextjs-base-blog