นำเข้า Components ใน NextJS

คุณสามารถนำเข้าได้ไม่เพียงแค่ไฟล์ ข้อมูล แต่ยังรวมถึง components เหมือนกับที่ เราคุ้นเคยในการทำงาน กับ React ปกติ ลองมาดูกันว่า มันทำงานอย่างไร

เริ่มต้นด้วยการกำหนดข้อตกลงบางประการ ตามที่คุณทราบแล้ว ในโฟลเดอร์ src/app เป็นที่จัดเก็บเพจของเว็บไซต์ ลอง วาง components ย่อยในโฟลเดอร์ src/comp

ทีนี้ลองเชื่อมต่อ component ย่อย กับเพจใดเพจหนึ่ง สมมติว่าเรามี เพจดังนี้:

src/app/test/page.jsxexport default function Test() {
  return <>
    <h1>Test</h1>
  </>;
}

สมมติว่าเรามี component ย่อย ต่อไปนี้:

src/comp/child/child.jsxexport default function Child() {
  return <p>
    child
  </p>;
}

นำเข้า component ย่อยของเรา ไปยังเพจของเรา:

src/app/test/page.jsximport Child from '@/comp/child/child.jsx';

export default function Test() {
  return <>
    <h1>Test</h1>
  </>;
}

ทำการแทรก component ที่นำเข้า เพื่อทำสิ่งนี้ ให้ใช้แท็กที่มีชื่อ ตัวแปรของ component:

src/app/test/page.jsximport Child from '@/comp/child/child.jsx';

export default function Test() {
  return <>
    <h1>Test</h1>
    <Child />
  </>;
}