Jika anda sedang mencari templat permulaan blog moden yang dibina dengan Next.js, projek NextJS Base Blog ialah titik permulaan yang sangat baik. Ia merupakan aplikasi blog sumber terbuka berciri penuh yang dibina dengan Next.js 15, React 19, TypeScript dan Tailwind CSS 4 .
Projek ini menyediakan seni bina yang bersih, UI moden componentsdan lapisan API olok-olok, menjadikannya sesuai untuk pembangun yang ingin membina blog dengan cepat tanpa menyediakan backend.
Repositori GitHub: https://github.com/bfotool/nextjs-base-blog
Projek ini amat berguna untuk:
Pembangun mempelajari Aplikasi Next.jsRouter
Membina blog atau laman web kandungan dengan cepat
Mencipta projek boilerplate Next.js
Membangunkan ciri UI sebelum menyambungkan API backend sebenar
Gambaran Keseluruhan Projek
Blog Asas NextJS direka bentuk sebagai templat blog sedia untuk pengeluaran dengan banyak ciri umum yang terdapat dalam laman web kandungan moden.
Projek ini merangkumi:
laman utama dengan catatan pilihan
halaman catatan blog
penapisan kategori
carian teks penuh
penomboran halaman
isi kandungan
catatan berkaitan
tema gelap/terang
Salah satu bahagian paling menarik dalam projek ini ialah Lapisan API Palsu, yang mensimulasikan API REST menggunakan pemintas Axios. Ini membolehkan pembangun membina dan menguji aplikasi tanpa memerlukan pelayan bahagian belakang .
Ciri-ciri Utama
Laman Utama
Laman utama memaparkan beberapa bahagian penting:
catatan wira pilihan
penapis kategori
grid catatan blog
navigasi berhalaman
Susun aturnya responsif sepenuhnya dan dioptimumkan untuk kedua-dua peranti desktop dan mudah alih.
Halaman Catatan Blog
Setiap artikel boleh diakses melalui laluan dinamik:
/blog/[slug]
Halaman catatan blog merangkumi beberapa ciri berguna:
kandungan artikel penuh
senarai kandungan automatik
anggaran masa membaca
butang kongsi sosial
cadangan catatan berkaitan
Ciri-ciri ini membantu mewujudkan pengalaman membaca profesional yang serupa dengan platform blog moden.
Halaman Kategori
Pengguna boleh menyemak imbas catatan mengikut kategori.
Laluan contoh:
/blog/category/[slug]
Ciri ini membolehkan pembaca meneroka kandungan dalam topik tertentu.
Fungsi Carian
Projek ini merangkumi halaman carian terbina dalam:
/search
Sokongan carian:
keputusan masa nyata
input yang dinyahbewarakan
mencari merentasi tajuk, petikan dan tag
Ini meningkatkan kebolehgunaan dan membantu pengguna mencari kandungan yang berkaitan dengan cepat.
Halaman Perihal dan Hubungan
Projek ini juga merangkumi halaman tambahan yang biasa ditemui di blog profesional.
Mengenai Halaman
Halaman Perihal memperkenalkan:
pasukan itu
kisah projek itu
nilai teras
Halaman Hubungan
Halaman Hubungan merangkumi borang yang disahkan sepenuhnya dengan:
pengesahan borang
pemberitahuan roti bakar
maklum balas kejayaan dan ralat
Sokongan Mod Gelap
Blog ini menyokong mod gelap dan mod terang .
Ciri-ciri termasuk:
pengesanan tema sistem automatik
togol manual
kegigihan tema menggunakan localStorage
Lapisan API Palsu(Pembangunan Tanpa Bahagian Belakang)
Salah satu bahagian paling menarik dalam projek ini ialah sistem API Palsunya .
Daripada memanggil pelayan sebenar, aplikasi ini menggunakan pemintas Axios untuk mensimulasikan respons API REST.
Cara API Palsu Berfungsi
Contoh Axios dicipta dalam:
src/services/api-client.ts
Apabila pembolehubah persekitaran diaktifkan:
NEXT_PUBLIC_USE_MOCK_API=true
Permintaan dipintas sebelum sampai ke rangkaian.
Pengendali olok-olok mengembalikan respons palsu dengan kelewatan yang realistik(200–600 ms).
Respons bertindak seperti respons API sebenar.
Data olok-olok disimpan dalam:
src/mocks/
Termasuk:
contoh catatan
penulis
kategori
Titik Akhir API yang Tersedia
API olok-olok menyokong beberapa titik akhir:
| Kaedah | Titik akhir | Penerangan |
|---|---|---|
| DAPATKAN | /siaran | Catatan blog berhalaman |
| DAPATKAN | /siaran/ditampilkan | Siaran pilihan |
| DAPATKAN | /siaran/:slug | Catatan blog tunggal |
| DAPATKAN | /kategori | Senarai kategori |
| DAPATKAN | /pengarang | Senarai pengarang |
| POS | /hubungi | Hantar borang hubungan |
Tumpukan Teknologi
Projek ini menggunakan tindanan frontend moden.
| Lapisan | Teknologi |
|---|---|
| Kerangka Kerja | Next.js 15 |
| Perpustakaan UI | Reaksi 19 |
| Bahasa | TypeScript |
| Penggayaan | CSS Tailwind 4 |
| Klien HTTP | Axios |
| Ikon | Reaksi Lucide |
| Lapisan | ESLint |
| Pemformatan | Lebih cantik |
Tumpukan ini menyediakan:
keselamatan jenis yang kuat
seni bina yang boleh dikekalkan
pengalaman pembangun moden
Struktur Projek
Struktur projek mengikuti seni bina yang bersih dan boleh diskala.
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
AplikasiRouter
Direktori ini appmengandungi semua laluan aplikasi.
Contoh:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
Ini mengikuti seni bina Aplikasi Next.jsRouter yang diperkenalkan dalam versi Next.js yang lebih baharu.
Komponen
UI componentsdisusun ke dalam kumpulan logik:
components/layout
components/common
components/blog
Struktur ini memastikan kod UI teratur dan lebih mudah diselenggara.
Lapisan Perkhidmatan
Folder ini servicesmengandungi logik berkaitan API:
Konfigurasi klien API
perkhidmatan pos
perkhidmatan kategori
perkhidmatan borang hubungan
Lapisan ini memisahkan logik pengambilan data daripada UIcomponents, yang meningkatkan kebolehskalaan.
Panduan Pemasangan
Keperluan
Sebelum memulakan, pastikan anda mempunyai:
Node.js 18 atau lebih baharu
npm, benang atau pnpm
Klon Repositori
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
Kebergantungan Pemasangan
npm install
Konfigurasikan Pembolehubah Persekitaran
cp .env.example .env
Mulakan Pelayan Pembangunan
npm run dev
Buka pelayar anda dan lawati:
http://localhost:3000
Skrip yang Tersedia
| Perintah | Penerangan |
|---|---|
| pembangunan jalankan npm | Mulakan pelayan pembangunan |
| binaan jalankan npm | Cipta binaan pengeluaran |
| mula jalankan npm | Mulakan pelayan pengeluaran |
| npm jalankan lint | Jalankan ESLint |
| format jalanan npm | Formatkan kod dengan Prettier |
| semakan jenis jalankan npm | Jalankan semakan TypeScript |
Beralih kepada API Sebenar
Jika anda ingin menyambungkan projek ke API backend sebenar, ikuti langkah-langkah ini.
Langkah 1: Lumpuhkan API Mock
Edit .envfail:
NEXT_PUBLIC_USE_MOCK_API=false
Langkah 2: Tetapkan URL Pangkalan API
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
Langkah 3: Padankan Jenis Data
Pastikan API bahagian belakang anda mengembalikan data yang sepadan dengan definisi TypeScript dalam:
src/types/index.ts
Tiada perubahan kod tambahan diperlukan.
Menyesuaikan Kandungan
Kandungan olok-olok boleh diedit di dalam:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
Ini membolehkan pembangun menyesuaikan kandungan demo dengan cepat.
Menyesuaikan Tema dan UI
Penggayaan global boleh didapati di:
src/app/globals.css
Projek ini menggunakan fon berikut:
DM Sans
JetBrains Mono
Anda boleh mengubah suai gaya atau menggantikan fon bergantung pada keperluan reka bentuk anda.
Kesimpulan
NextJS Base Blog ialah templat permulaan yang berkuasa dan moden untuk membina blog dengan Next.js.
Kelebihan utama projek ini termasuk:
timbunan teknologi moden
seni bina yang bersih
API olok-olok untuk pembangunan
integrasi mudah dengan API backend sebenar
UI responsif dan ciri-ciri moden
Jika anda membina blog, laman web pembangun atau platform kandungan dengan Next.js, repositori ini dapat menjimatkan masa pembangunan anda dengan ketara.
Terokai kod sumber di sini: https://github.com/bfotool/nextjs-base-blog