การจัดการเนื้อหาและข้อมูลแบบคงที่ใน Next.js

การจัดการเนื้อหาและข้อมูลแบบคงที่ใน Next.js

ในการเดินทางของการพัฒนา Next.js แอปพลิเคชัน การจัดการเนื้อหาและข้อมูลคงที่อย่างมีประสิทธิภาพถือเป็นสิ่งสำคัญสำหรับประสบการณ์ผู้ใช้ที่ราบรื่น บทความนี้สำรวจวิธีสร้างหน้าเอกสารประกอบโดยใช้ markdown และวิธีจัดการข้อมูลคงที่อย่างมีประสิทธิภาพโดยใช้ public ไดเรกทอรีใน Next.js.

การสร้างหน้าเอกสารด้วย Markdown

เอกสารประกอบเป็นส่วนสำคัญของเว็บแอปพลิเคชันใดๆ ใน Next.js คุณสามารถสร้างหน้าเอกสารประกอบได้อย่างง่ายดายโดยใช้ markdown ภาษามาร์กอัปขนาดเล็ก เพื่อให้บรรลุเป้าหมายนี้ เราสามารถใช้ react-markdown ไลบรารี่ได้ ซึ่งช่วยให้เราเรนเดอร์ markdown เนื้อหาเป็นส่วนประกอบของ React ได้

ขั้นแรก มาติดตั้ง react-markdown ไลบรารี่โดยใช้ npm หรือ Yarn:

npm install react-markdown  
# or  
yarn add react-markdown  

ตอนนี้ เรามาสร้างหน้าเอกสารประกอบที่มีชื่ออยู่ documentation.md ใน pages ไดเร็กทอรี:

# Welcome to Our Documentation  
  
In this section, we'll explore the features of our application and how to get started.  
  
## Getting Started  
  
To start using our application, follow these steps...  
  
## Features  
  
Our application offers the following features...  
  

ถัดไป สร้างไฟล์ที่มีชื่อ documentation.js ใน pages ไดเร็กทอรีเพื่อแสดง markdown เนื้อหา:

import React from 'react';  
import ReactMarkdown from 'react-markdown';  
  
const documentationContent = `# Welcome to Our Documentation\n\nIn this section, we'll explore the features of our application and how to get started.\n\n## Getting Started\n\nTo start using our application, follow these steps...\n\n## Features\n\nOur application offers the following features...`;  
  
function Documentation() {  
  return( 
    <div>  
      <h1>Documentation</h1>  
      <ReactMarkdown>{documentationContent}</ReactMarkdown>  
    </div>  
 );  
}  
  
export default Documentation;  

ในตัวอย่างนี้ documentationContent ตัวแปรประกอบด้วย markdown เนื้อหา และ ใช้ ReactMarkdown ส่วนประกอบจาก ไลบรารีเพื่อแสดงผลเป็น HTML react-markdown

การจัดการข้อมูลแบบคงที่ด้วย Public ไดเร็กทอรี

ใน Next.js ไดเรกทอรี public คือโฟลเดอร์พิเศษที่ใช้สำหรับให้บริการเนื้อหาคงที่ เช่น รูปภาพ แบบอักษร และไฟล์อื่นๆ ไดเรกทอรีนี้สามารถเข้าถึงได้จากรากของแอปพลิเคชันของคุณ

หากต้องการรวมรูปภาพที่อยู่ใน public ไดเร็กทอรี คุณสามารถใช้โค้ดต่อไปนี้ในส่วนประกอบของคุณ:

<img src="/image.png" alt="An example image" />

รหัสนี้จะอ้างอิงรูปภาพที่มีชื่อ image.png อยู่ใน public ไดเร็กทอรี

บทสรุป

ในส่วนนี้ คุณได้เรียนรู้วิธีสร้างหน้าเอกสารประกอบโดยใช้ และ markdown ไลบรารี react-markdown รวมถึงวิธีจัดการข้อมูลคงที่โดยใช้ public ไดเร็กทอรีใน Next.js เทคนิคเหล่านี้จะช่วยให้คุณจัดเตรียมเนื้อหาที่ครอบคลุมและจัดการสินทรัพย์คงที่ใน Next.js แอปพลิเคชัน ของคุณได้อย่างมีประสิทธิภาพ