Bina blog Next.js yang laju: nota dari projek ini
Bagaimana blog ini dibina: tulis di Obsidian, terbit dengan git push, halaman statik di Vercel, dan Neon untuk bahagian yang perlu pangkalan data.
Blog ini dibina dengan satu matlamat: halaman mesti dimuat dengan pantas dan mudah dijumpai di Google, tanpa menyusahkan penulis. Ini nota ringkas tentang cara ia disusun, untuk sesiapa yang mahu membina sesuatu yang serupa.
Tulis di Obsidian, terbit dengan git
Setiap artikel ialah satu fail Markdown dalam folder content/, yang dibuka sebagai vault Obsidian. Maklumat seperti tajuk, seksyen, bahasa dan tarikh disimpan dalam frontmatter di bahagian atas fail.
Artikel hanya diterbitkan apabila status: published dan tarikhnya sudah tiba. Selepas perubahan ditolak ke GitHub, Vercel membina semula laman dalam masa lebih kurang seminit. Tiada CMS, tiada log masuk dan tiada pangkalan data untuk kandungan.
Pautan gaya Obsidian seperti [[Tajuk artikel lain]] ditukar kepada pautan biasa semasa laman dibina. Gambar yang ditampal ke dalam nota disalin ke laman secara automatik.
Halaman statik dahulu
Laman ini menggunakan Next.js 16 dengan App Router. Hampir setiap halaman dijana siap semasa build:
- halaman utama untuk BM (
/ms) dan English (/en) - setiap artikel, seksyen, tag dan penulis
- RSS, peta laman dan peta laman Google News
Halaman statik bermakna pelayar menerima HTML yang lengkap dengan serta-merta. JavaScript hanya digunakan di tempat yang benar-benar perlu, seperti menu mudah alih, carian dan borang langganan.
Neon untuk bahagian yang dinamik
Ada beberapa perkara yang memerlukan pangkalan data. Untuk itu kami gunakan Neon Postgres, yang dipasang melalui Vercel Marketplace:
| Ciri | Apa yang disimpan |
|---|---|
| Surat berita | Emel pelanggan, kekerapan dan seksyen pilihan |
| Senarai Tular | Kiraan bacaan harian setiap artikel |
| Borang hantar berita | Tip daripada pembaca |
Emel pengesahan langganan dihantar melalui Resend. Pelanggan perlu klik pautan dalam emel sebelum mereka dimasukkan ke senarai.
SEO yang dibina dari awal
Untuk laman berita, SEO bukan tambahan pada hujung projek. Setiap artikel ada:
- tajuk dan penerangan sendiri, URL kanonik, dan pautan
hreflangjika ada terjemahan - data berstruktur
NewsArticleatauBlogPosting, termasuk penulis dan tarikh kemas kini - imej perkongsian yang dijana automatik untuk media sosial
Laman ini juga didaftarkan di Google Search Console bersama peta lamannya.
Apa seterusnya
Ruangan komen akan menyusul, bersama halaman moderasi untuk pasukan editor. Jika ada soalan tentang cara laman ini dibina, hantar kepada kami melalui borang Hubungi Kami.
Baca juga
Semua cerita Dev
Mohammad Hasif Afiq, rakyat Malaysia pertama dalam Apple Developer Recognition
Jurutera perisian kanan di Grab itu disenaraikan bersama 49 pembangun lain dari seluruh dunia. Ini perjalanannya, dari aplikasi gergasi tempatan hingga Bantu App dan Hidayah App.
Four things the DeTA community shared this week: kev, k8sgames, dnsrecords.io and WardRun
Small decision models you can run yourself, Kubernetes as a game, a terminal-style DNS lookup, and a Malaysian housemanship survival game.
Claude Max and Team plans now include monthly API credits: who gets what and how to claim
Max and Team subscribers can now claim monthly credits for the Claude API. Here's how much each plan gets, what the credits cover, and how to link them.