การจัดการเนื้อหาและข้อมูลแบบคงที่ใน Next.js
ในการเดินทางของการพัฒนา Next.js แอปพลิเคชัน การจัดการเนื้อหาและข้อมูลคงที่อย่างมีประสิทธิภาพถือเป็นสิ่งสำคัญสำหรับประสบการณ์ผู้ใช้ที่ราบรื่น บทความนี้สำรวจวิธีสร้างหน้าเอกสารประกอบโดยใช้ markdown และวิธีจัดการข้อมูลคงที่อย่างมีประสิทธิภาพโดยใช้ public
ไดเรกทอรีใน Next.js.
การสร้างหน้าเอกสารด้วย Markdown
เอกสารประกอบเป็นส่วนสำคัญของเว็บแอปพลิเคชันใดๆ ใน Next.js คุณสามารถสร้างหน้าเอกสารประกอบได้อย่างง่ายดายโดยใช้ markdown ภาษามาร์กอัปขนาดเล็ก เพื่อให้บรรลุเป้าหมายนี้ เราสามารถใช้ react-markdown
ไลบรารี่ได้ ซึ่งช่วยให้เราเรนเดอร์ markdown เนื้อหาเป็นส่วนประกอบของ React ได้
ขั้นแรก มาติดตั้ง react-markdown
ไลบรารี่โดยใช้ npm หรือ Yarn:
ตอนนี้ เรามาสร้างหน้าเอกสารประกอบที่มีชื่ออยู่ documentation.md
ใน pages
ไดเร็กทอรี:
ถัดไป สร้างไฟล์ที่มีชื่อ documentation.js
ใน pages
ไดเร็กทอรีเพื่อแสดง markdown เนื้อหา:
ในตัวอย่างนี้ documentationContent
ตัวแปรประกอบด้วย markdown เนื้อหา และ ใช้ ReactMarkdown
ส่วนประกอบจาก ไลบรารีเพื่อแสดงผลเป็น HTML react-markdown
การจัดการข้อมูลแบบคงที่ด้วย Public ไดเร็กทอรี
ใน Next.js ไดเรกทอรี public
คือโฟลเดอร์พิเศษที่ใช้สำหรับให้บริการเนื้อหาคงที่ เช่น รูปภาพ แบบอักษร และไฟล์อื่นๆ ไดเรกทอรีนี้สามารถเข้าถึงได้จากรากของแอปพลิเคชันของคุณ
หากต้องการรวมรูปภาพที่อยู่ใน public
ไดเร็กทอรี คุณสามารถใช้โค้ดต่อไปนี้ในส่วนประกอบของคุณ:
รหัสนี้จะอ้างอิงรูปภาพที่มีชื่อ image.png
อยู่ใน public
ไดเร็กทอรี
บทสรุป
ในส่วนนี้ คุณได้เรียนรู้วิธีสร้างหน้าเอกสารประกอบโดยใช้ และ markdown ไลบรารี react-markdown
รวมถึงวิธีจัดการข้อมูลคงที่โดยใช้ public
ไดเร็กทอรีใน Next.js เทคนิคเหล่านี้จะช่วยให้คุณจัดเตรียมเนื้อหาที่ครอบคลุมและจัดการสินทรัพย์คงที่ใน Next.js แอปพลิเคชัน ของคุณได้อย่างมีประสิทธิภาพ