การใช้ Link และ useRouter เพื่อการนำทางใน Next.js

การนำทาง (Navigation) เป็นหนึ่งในองค์ประกอบสำคัญของเว็บแอปพลิเคชัน เพราะมันทำให้ผู้ใช้สามารถเคลื่อนที่ไปมาระหว่างหน้าได้อย่างราบรื่น ใน Next.js ซึ่งเป็น React Framework ที่ได้รับความนิยมสูง เรามีเครื่องมือสองตัวที่ใช้ในการนำทางหลัก ๆ ได้แก่ Link และ useRouter

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

ทำไมต้องใช้ Link และ useRouter?

ใน Next.js เราสามารถใช้ <a href="..."> แบบปกติได้ แต่ปัญหาคือมันจะโหลดหน้าใหม่ทุกครั้งที่คลิกลิงก์ ซึ่งไม่ใช่สิ่งที่เราต้องการสำหรับเว็บแอปที่ต้องการความเร็วและประสิทธิภาพสูง

Link และ useRouter แก้ปัญหานี้ได้อย่างไร?

• Link ช่วยให้เราสามารถทำ client-side navigation ได้โดยที่ไม่ต้องโหลดหน้าใหม่
• useRouter ให้เราควบคุมการนำทางด้วยโค้ด เช่น การเปลี่ยนเส้นทาง (redirect) หรือดึงค่าพารามิเตอร์จาก URL

1. Link – วิธีสร้างลิงก์นำทางแบบง่าย ๆ

ถ้าเราต้องการสร้างลิงก์ระหว่างหน้าต่าง ๆ ใน Next.js วิธีที่ถูกต้องคือใช้ <Link> จาก next/link

ตัวอย่างการใช้งานพื้นฐาน

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>หน้าแรก</h1>
      <Link href="/about">ไปที่หน้า About</Link>
    </div>
  );
}

✅ ทำไมต้องใช้ Link แทน <a>?

• เมื่อใช้ Link Next.js จะ โหลดหน้าใหม่ให้เร็วขึ้น เพราะมันใช้เทคนิคการ prefetch (โหลดล่วงหน้า)
• ไม่ต้องโหลด HTML ใหม่ทั้งหน้า เหมือนกับ Single Page Application (SPA)
• การใช้งานง่าย ไม่ต้องเขียนโค้ด JavaScript เพิ่ม

2. useRouter – การควบคุมเส้นทางด้วย JavaScript

ในบางกรณี เราอาจต้องนำทางโดยไม่ใช้ <Link> เช่น การเปลี่ยนหน้าเมื่อผู้ใช้กดปุ่ม หรือเปลี่ยนเส้นทางหลังจากทำบางอย่างเสร็จ (redirect)

Next.js มี useRouter จาก next/router ที่ช่วยให้เราควบคุมเส้นทางได้ผ่านโค้ด JavaScript

ตัวอย่างการใช้งาน useRouter เพื่อเปลี่ยนหน้า

import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();

  const goToAbout = () => {
    router.push('/about');
  };

  return (
    <div>
      <h1>หน้าแรก</h1>
      <button onClick={goToAbout}>ไปที่หน้า About</button>
    </div>
  );
}

✅ router.push(url) ทำอะไรได้บ้าง?

• เปลี่ยนเส้นทางโดยไม่ต้องใช้ <Link>
• ทำให้การเปลี่ยนหน้าเกิดขึ้นจากอีเวนต์ เช่น คลิกปุ่ม หรือส่งฟอร์ม
• รองรับการใช้พารามิเตอร์ใน URL

3. ส่งค่าผ่าน URL ด้วย Query Parameters

ในบางกรณี เราอาจต้องส่งข้อมูลไปพร้อมกับ URL เช่น /profile?user=JohnDoe

วิธีส่งค่าไปยังหน้าอื่น

import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();

  const goToProfile = () => {
    router.push({
      pathname: '/profile',
      query: { user: 'JohnDoe' },
    });
  };

  return (
    <div>
      <h1>หน้าแรก</h1>
      <button onClick={goToProfile}>ไปที่โปรไฟล์ของ John Doe</button>
    </div>
  );
}

4. ดึงค่าพารามิเตอร์จาก URL

เมื่อเราส่งค่าไปกับ URL แล้ว เราก็ต้องดึงค่ามาใช้ที่หน้าปลายทาง

วิธีดึงค่าจาก query parameters

import { useRouter } from 'next/router';

export default function Profile() {
  const router = useRouter();
  const { user } = router.query; // ดึงค่าพารามิเตอร์จาก URL

  return (
    <div>
      <h1>โปรไฟล์ของ {user || 'ไม่ทราบชื่อ'}</h1>
    </div>
  );
}

✅ จุดที่ต้องระวัง

• ค่า router.query อาจเป็น undefined ถ้าหน้าโหลดครั้งแรก ต้องเช็กก่อนใช้

5. นำทางแบบ Dynamic Routing

ถ้าเรามีเส้นทางแบบไดนามิก เช่น /blog/[id] และอยากเปลี่ยนหน้าไปที่ /blog/123 เราสามารถใช้ router.push() ได้แบบนี้

ตัวอย่าง Dynamic Routing

import { useRouter } from 'next/router';

export default function BlogList() {
  const router = useRouter();

  const goToBlog = (id) => {
    router.push(`/blog/${id}`);
  };

  return (
    <div>
      <h1>รายการบทความ</h1>
      <button onClick={() => goToBlog(123)}>อ่านบทความ 123</button>
    </div>
  );
}

ที่หน้า /blog/[id].js เราสามารถดึงค่า id จาก URL ได้แบบนี้

import { useRouter } from 'next/router';

export default function BlogPost() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>บทความที่ {id}</h1>;
}

Link กับ useRouter ควรใช้เมื่อไหร่?

กรณี                                                ใช้ Link    ใช้ useRouter
ลิงก์ระหว่างหน้า                                    ✅              ❌
นำทางจากปุ่มหรืออีเวนต์                      ❌              ✅
ส่งค่าไปกับ URL                                   ❌              ✅
Redirect หลังทำบางอย่างเสร็จ             ❌              ✅
ต้องการโหลดล่วงหน้า (prefetch)          ✅             ❌

สรุป

• Link ใช้สำหรับการนำทางแบบปกติที่ต้องการให้ Next.js จัดการ prefetch ให้
• useRouter ใช้เมื่อต้องการนำทางด้วยโค้ด JavaScript เช่น การ redirect หรือดึงค่าจาก URL
• Next.js ช่วยให้การนำทางรวดเร็วและมีประสิทธิภาพกว่าการใช้ <a> แบบดั้งเดิม

หวังว่าบทความนี้จะช่วยให้คุณเข้าใจการนำทางใน Next.js มากขึ้น!

การใช้งาน pages/ และการสร้าง Routing อัตโนมัติใน Next.js

ถ้าคุณเป็นสายเว็บที่อยากเขียนเว็บเร็ว ๆ ไม่ต้องมานั่งเซ็ต Routing เองให้ปวดหัว Next.js คือเพื่อนที่คุณต้องการ! หนึ่งในฟีเจอร์เด็ดของมันคือการใช้โฟลเดอร์ pages/ เพื่อสร้าง Routing แบบอัตโนมัติ ที่จะทำให้ชีวิตของคุณง่ายขึ้น ไม่ต้องมานั่งเขียนไฟล์ routes.js หรือกำหนด path เองแบบสมัยก่อน

บทความนี้จะพาคุณไปทำความเข้าใจว่า โฟลเดอร์ pages/ ใน Next.js ทำงานยังไง, จะใช้มันให้เกิดประโยชน์สูงสุดได้ยังไง, และ ถ้าคุณอยากใช้ Dynamic Routing หรือ API Routes ต้องทำยังไง มาเริ่มกันเลย!

 

พื้นฐานของโฟลเดอร์ pages/

ใน Next.js โฟลเดอร์ pages/ เป็นศูนย์กลางของระบบ Routing ทั้งหมด มันทำงานง่าย ๆ คือ "มีไฟล์อะไรใน pages/ ก็จะมี URL ตามไฟล์นั้น" เช่น

• pages/index.js → /
• pages/about.js → /about
• pages/contact.js → /contact

แค่สร้างไฟล์ .js หรือ .tsx ในโฟลเดอร์นี้ Next.js ก็จะสร้างเส้นทางให้โดยอัตโนมัติ ไม่ต้องเขียนโค้ดอะไรเพิ่ม!

ตัวอย่างไฟล์ pages/about.js 

export default function AboutPage() {
  return <h1>นี่คือหน้า About</h1>;
}

พอสร้างไฟล์นี้เสร็จ คุณสามารถเข้าเว็บที่ /about ได้เลยโดยไม่ต้องตั้งค่าอะไรเพิ่ม!

สร้าง Routing อัตโนมัติแบบง่าย ๆ

การสร้างหน้าใหม่

ถ้าอยากเพิ่มหน้าใหม่ ก็แค่สร้างไฟล์ใหม่ใน pages/ เท่านั้น เช่น

mkdir pages/blog
touch pages/blog/index.js

จากนั้นเพิ่มโค้ดง่าย ๆ

export default function BlogPage() {
  return <h1>ยินดีต้อนรับสู่หน้า Blog!</h1>;
}

แค่นี้คุณก็สามารถเข้าหน้า /blog ได้แล้ว ไม่ต้องไปแก้ไขอะไรเพิ่มเติมเลย 

 

Dynamic Routing: เส้นทางที่ยืดหยุ่นกว่านี้มีอีกไหม? มี!

สมมติว่าคุณอยากสร้างหน้า Blog ที่สามารถรองรับโพสต์หลาย ๆ อัน เช่น /blog/post-1, /blog/post-2 โดยไม่ต้องสร้างไฟล์ใหม่ให้แต่ละโพสต์เอง เราสามารถใช้ Dynamic Routing ได้โดยใช้เครื่องหมาย [] ในชื่อไฟล์

ตัวอย่าง:
สร้างไฟล์ pages/blog/[slug].js

import { useRouter } from 'next/router';

export default function BlogPostPage() {
  const router = useRouter();
  const { slug } = router.query;

  return <h1>กำลังอ่านบทความ: {slug}</h1>;
}

เมื่อมีคนเข้าไปที่ /blog/my-first-post หรือ /blog/hello-world ค่า {slug} จะเปลี่ยนไปตาม URL อัตโนมัติ

 

API Routes: ใช้ pages/api/ เพื่อสร้าง API ง่าย ๆ

Next.js ไม่ได้ใช้ pages/ แค่สำหรับสร้างหน้าเว็บเท่านั้น มันยังสามารถใช้สำหรับสร้าง API ได้อีกด้วย!

ถ้าคุณสร้างไฟล์ pages/api/hello.js และเขียนโค้ดแบบนี้:

export default function handler(req, res) {
  res.status(200).json({ message: "Hello from API!" });
}

ตอนนี้คุณสามารถเรียก API นี้ได้ที่ /api/hello โดยไม่ต้องตั้งค่าเพิ่ม 

Middleware และการ Redirect Routing

ถ้าคุณอยากควบคุม Routing แบบละเอียดขึ้น Next.js ก็มีเครื่องมือให้ เช่น Middleware และ Redirects

Middleware ช่วยให้คุณสามารถจัดการกับ Request ก่อนที่มันจะไปถึงหน้าเว็บ เช่น ตรวจสอบสิทธิ์การเข้าถึง

ตัวอย่าง Middleware

สร้างไฟล์ middleware.js

import { NextResponse } from "next/server";

export function middleware(req) {
  const url = req.nextUrl.clone();
  if (!req.cookies.auth) {
    url.pathname = "/login";
    return NextResponse.redirect(url);
  }
  return NextResponse.next();
}

จากนั้นกำหนดให้ Middleware ทำงานใน next.config.js

module.exports = {
  async redirects() {
    return [
      {
        source: "/old-page",
        destination: "/new-page",
        permanent: true,
      },
    ];
  },
};
 

ข้อดีของระบบ Routing อัตโนมัติใน Next.js

• ลดโค้ดที่ต้องเขียน – ไม่ต้องมานั่งเซ็ตเส้นทางเอง
• SEO-Friendly – เส้นทางแบบ Static และ Dynamic ทำงานได้ดี
• มี API Routes ในตัว – ไม่ต้องแยก Backend ออกมาเอง
• รองรับ Dynamic Routing – เหมาะกับเว็บที่มีเนื้อหาหลายหน้า
• สรุป: Next.js ทำให้ Routing ง่ายขึ้นเยอะ!

ระบบ Routing ใน Next.js ออกแบบมาให้ใช้ง่ายสุด ๆ แค่สร้างไฟล์ในโฟลเดอร์ pages/ ก็สามารถเข้าถึง URL นั้นได้เลย ไม่ต้องตั้งค่าอะไรเพิ่มเติม

ถ้าคุณต้องการ Routing ที่ซับซ้อนขึ้น เช่น Dynamic Routes หรือ API Routes Next.js ก็รองรับทั้งหมดโดยไม่ต้องพึ่ง Third-party library เลย 

พร้อมจะใช้ Next.js ในโปรเจกต์ของคุณหรือยัง? ถ้าพร้อมแล้ว ลองเล่นกับ pages/ ดูเลย แล้วคุณจะติดใจ!