Menguruskan Kandungan dan Data Statik dalam Next.js
Dalam perjalanan membangunkan Next.js aplikasi, mengurus kandungan dan data statik dengan cekap adalah penting untuk pengalaman pengguna yang lancar. Artikel ini meneroka cara membuat halaman dokumentasi menggunakan markdown dan cara mengurus data statik dengan berkesan menggunakan public
direktori dalam Next.js.
Mencipta Halaman Dokumentasi dengan Markdown
Dokumentasi adalah bahagian penting dalam mana-mana aplikasi web. Dalam Next.js, anda boleh membuat halaman dokumentasi dengan mudah dengan menggunakan markdown, bahasa penanda yang ringan. Untuk mencapai matlamat ini, kami boleh menggunakan react-markdown
perpustakaan, yang membolehkan kami menjadikan markdown kandungan sebagai komponen React.
Mula-mula, mari pasang react-markdown
perpustakaan menggunakan npm atau yarn:
Sekarang, mari buat halaman dokumentasi yang dinamakan documentation.md
dalam pages
direktori:
Seterusnya, buat fail bernama documentation.js
dalam pages
direktori untuk memaparkan markdown kandungan:
Dalam contoh ini, documentationContent
pembolehubah mengandungi markdown kandungan, dan ReactMarkdown
komponen daripada react-markdown
pustaka digunakan untuk menjadikannya sebagai HTML.
Mengurus Data Statik dengan Public Direktori
Dalam Next.js, public
direktori ialah folder khas yang digunakan untuk menyediakan aset statik seperti imej, fon dan fail lain. Direktori ini boleh diakses dari akar aplikasi anda.
Untuk memasukkan imej yang terletak dalam public
direktori, anda boleh menggunakan kod berikut dalam komponen anda:
Kod ini akan merujuk imej yang dinamakan image.png
terletak dalam public
direktori.
Kesimpulan
Dalam bahagian ini, anda telah mempelajari cara membuat halaman dokumentasi menggunakan markdown dan react-markdown
perpustakaan, serta cara mengurus data statik menggunakan public
direktori dalam Next.js. Teknik ini akan membantu anda menyediakan kandungan yang komprehensif dan mengurus aset statik dalam Next.js aplikasi anda dengan berkesan.