🔗 บทที่ 4: Link และ Navigation

'use client';
import { useRouter } from 'next/navigation';

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

  const handleGoBack = () => {
    router.back(); // กลับหน้าก่อนหน้า
  };

  const handleGoForward = () => {
    router.forward(); // ไปหน้าถัดไป
  };

  const handleGoHome = () => {
    router.push('/'); // ไปหน้าแรก
  };

  const handleReplace = () => {
    router.replace('/dashboard'); // replace current page
  };

  const handleRefresh = () => {
    router.refresh(); // refresh current page
  };

  return (
    <div>
      <button onClick={handleGoBack}>← ย้อนกลับ</button>
      <button onClick={handleGoForward}>ถัดไป →</button>
      <button onClick={handleGoHome}>🏠 หน้าแรก</button>
      <button onClick={handleReplace}>📊 Dashboard</button>
      <button onClick={handleRefresh}>🔄 รีเฟรช</button>
    </div>
  );
}

'use client';
import { useRouter } from 'next/navigation';
import { useState } from 'react';

export default function LoginForm() {
  const router = useRouter();
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);

    try {
      // ส่งข้อมูล login
      const response = await fetch('/api/auth/login', {
        method: 'POST',
        // ... login logic
      });

      if (response.ok) {
        // Login สำเร็จ - redirect ไป dashboard
        router.push('/dashboard');
      } else {
        // Login ไม่สำเร็จ - แสดง error
        alert('Login failed');
      }
    } catch (error) {
      console.error('Login error:', error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* form fields */}
      <button type="submit" disabled={isLoading}>
        {isLoading ? 'กำลังเข้าสู่ระบบ...' : 'เข้าสู่ระบบ'}
      </button>
    </form>
  );
}

'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

const navItems = [
  { href: '/', label: 'หน้าแรก' },
  { href: '/about', label: 'เกี่ยวกับเรา' },
  { href: '/products', label: 'สินค้า' },
  { href: '/contact', label: 'ติดต่อเรา' }
];

export default function ActiveNavigation() {
  const pathname = usePathname();

  return (
    <nav>
      <ul className="flex space-x-4">
        {navItems.map((item) => {
          const isActive = pathname === item.href;
          
          return (
            <li key={item.href}>
              <Link 
                href={item.href}
                className={`px-3 py-2 rounded ${
                  isActive 
                    ? 'bg-blue-500 text-white' 
                    : 'text-gray-700 hover:bg-gray-100'
                }`}
              >
                {item.label}
              </Link>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}