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