เมตาดาต้าใน NextJS

ตอนนี้เรามาดูวิธีการเพิ่ม title และคำอธิบายเมตา (meta description) ลงในหน้าเว็บ ใน NextJS การทำงานกับสิ่งเหล่านี้จะดำเนินการร่วมกัน ดังนั้นจึงเรียกด้วยคำทั่วไปว่า เมตาดาต้า

เมตาดาต้าถูกกำหนดโดยใช้ออบเจ็กต์พิเศษที่ประกอบด้วย title และคำอธิบายเมตา:

app/layout.jsx{
  title: '...',
  description: '...',
};

ในขณะเดียวกัน NextJS จะทำการแทรกเมตาดาต้าในแท็กที่เกี่ยวข้องโดยอัตโนมัติ เราไม่จำเป็นต้องกังวลเกี่ยวกับเรื่องนี้ ดังนั้นในโครงร่างหลักของเว็บไซต์จึงไม่มีแท็ก head เพราะมันจะถูกสร้างขึ้นโดยอัตโนมัติ:

app/layout.jsxexport default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

มีวิธีต่างๆ ในการกำหนดเมตาดาต้า ซึ่งเราจะศึกษาในบทเรียนต่อไป