link ใน Next.js

Link ใน Next.js เป็นคอมโพเนนต์ React ที่ใช้เพื่อเชื่อมโยงไปยังหน้าอื่นในโปรเจ็กต์ของคุณ Link คอมโพเนนต์จะสร้างลิงก์ที่เป็นแบบไดนามิกและจัดการการโหลดหน้าล่วงหน้า

คุณสามารถใช้ Link คอมโพเนนต์เพื่อเชื่อมโยงไปยังเส้นทางใดก็ได้ในโปรเจ็กต์ของคุณ ตัวอย่างเช่น ไฟล์ต่อไปนี้จะสร้างลิงก์ไปยังหน้าเกี่ยวกับ:

1
<Link href="/about">About</Link>

เมื่อผู้ใช้คลิกลิงก์นี้ Next.js จะโหลดหน้าเกี่ยวกับและแสดงในเบราว์เซอร์ของผู้ใช้

คุณยังสามารถใช้ Link คอมโพเนนต์เพื่อเชื่อมโยงไปยังเส้นทางแบบไดนามิก ตัวอย่างเช่น ไฟล์ต่อไปนี้จะสร้างลิงก์ไปยังโพสต์ในบล็อกของคุณ:

1
<Link href="/posts/[id]">Post</Link>

เมื่อผู้ใช้คลิกลิงก์นี้ Next.js จะโหลดหน้าโพสต์ที่มี ID ที่กำหนดใน URL และแสดงในเบราว์เซอร์ของผู้ใช้

Link คอมโพเนนต์มีตัวเลือกมากมายที่ช่วยให้คุณปรับแต่งลิงก์ของคุณได้ ตัวอย่างเช่น คุณสามารถระบุข้อความสำหรับลิงก์ ปุ่มสำหรับลิงก์ หรือคุณสมบัติเพิ่มเติมสำหรับลิงก์

ต่อไปนี้คือตัวเลือกบางส่วนสำหรับ Link คอมโพเนนต์:

  • as: ข้อความสำหรับลิงก์
  • href: URL ของลิงก์
  • target: แท็กเป้าหมายสำหรับลิงก์
  • rel: ความสัมพันธ์ของลิงก์
  • children: เนื้อหาที่แสดงในลิงก์

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับตัวเลือกเหล่านี้ได้จากเอกสารประกอบของ Next.js

Link คอมโพเนนต์เป็นเครื่องมือที่ทรงพลังที่จะช่วยให้คุณสร้างลิงก์ที่เป็นแบบไดนามิกและจัดการการโหลดหน้าล่วงหน้าในโปรเจ็กต์ของคุณ