เวลาเราเขียนเว็บด้วย Next.js หลายครั้งเราอยากให้ ปุ่ม (Button) ทำงานเหมือนลิงก์ เช่น กดปุ่มแล้วไปหน้าอื่น หรือกดปุ่มแล้วเปิดแท็บใหม่ บทความนี้จะมาแนะนำวิธีทำได้ง่าย ๆ ทั้งแบบใช้ window.open() และ Link ของ Next.js ครับ
วิธีที่ 1: ใช้ window.open() ในปุ่ม
โค้ดตัวอย่าง
const handleExampleClick = () => {
window.open(`/product/${id}`, "_blank"); // เปิดในแท็บใหม่
};
<button onClick={handleExampleClick}>
ไปหน้าสินค้า
</button>
อธิบาย
_blank→ เปิดในแท็บใหม่_self→ เปิดในแท็บปัจจุบัน (เหมือนrouter.push)
เหมาะสำหรับปุ่มที่ต้องการ ควบคุมด้วย JavaScript โดยตรง เช่น มีการเช็คเงื่อนไขก่อนจะเปิดลิงก์ วิธีที่ 2: ใช้
ของ Next.js
โค้ดตัวอย่าง
import Link from "next/link";
<Link href={`/product/${id}`} target="_blank" rel="noopener noreferrer">
<button>ไปหน้าสินค้า</button>
</Link>
อธิบาย
target="_blank"→ เปิดในแท็บใหม่rel="noopener noreferrer"→ เพิ่มความปลอดภัยเวลาเปิดแท็บใหม่
วิธีนี้จะทำให้ปุ่มยังคงเป็น ลิงก์จริง ๆ (SEO-friendly) และรองรับการทำงานของ Next.js Routing ✅ สรุป ใช้ window.open() → ถ้าอยากควบคุมผ่าน JavaScript (เหมาะกับปุ่ม action ที่มี logic) ใช้
→ ถ้าอยากให้เป็นลิงก์จริง ๆ (เหมาะกับ SEO และการแชร์ลิงก์)
เท่านี้เราก็สามารถทำให้ปุ่มใน Next.js กลายเป็นลิงก์ได้ทั้งในแท็บปัจจุบัน และเปิดแท็บใหม่ได้อย่างง่ายดาย ลองเลือกใช้วิธีที่เหมาะกับโปรเจ็คของคุณดูนะครับ
