Next.js Mastery: The Complete App Router Guide

// app/components/LikeButton.tsx
// แบ่งแยกการคลิกและสถานะออกมาเป็น Client Component แยกอิสระ
"use client";

import { useState } from "react";

export function LikeButton() {
  const [likes, setLikes] = useState(0);
  return <button onClick={() => setLikes(likes + 1)}>👍 {likes}</button>;
}

// app/page.tsx
// หน้าหลักยังคงเป็น Server Component เพื่อประมวลผลข้อมูลทางเซิร์ฟเวอร์ได้อย่างรวดเร็ว
import { LikeButton } from "@/components/LikeButton";

export default async function HomePage() {
  // ดึงข้อมูลทางฝั่งเซิร์ฟเวอร์โดยตรง
  const stats = await getStatsFromDB();

  return (
    <div>
      <h1>สถิติภาพรวม: {stats.views}</h1>
      <LikeButton />
    </div>
  );
}

// app/dashboard/layout.tsx
// ทำหน้าที่กำหนดโครงหน้าที่มีเมนูซ้ายมือ และส่งค่าเนื้อหาไปแสดงในฝั่งพื้นที่ขวามือ
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex min-h-screen">
      <aside className="w-64 bg-gray-100 p-4">Dashboard Menu</aside>
      {/* เนื้อหาของ page.tsx ในเส้นทางย่อยจะสวมรอยอยู่ใน {children} */}
      <main className="flex-1 p-8">{children}</main>
    </div>
  );
}

// app/product/[id]/page.tsx
// หน้าเพจนี้จะสวมรอยให้ครอบคลุมการโหลดข้อมูลของทุก URL ที่ต่อท้าย /product/xxx

export default async function ProductDetail({ 
  params,
  searchParams 
}: { 
  params: { id: string },
  searchParams: { tab?: string }
}) {
  // ดึงค่า ID มาใช้งาน (ตัวอย่าง: ไดัค่า "99" จากเส้นทาง /product/99)
  const product = await getProduct(params.id);
  
  // ตรวจสอบ Parameter ที่เข้ามาผ่าน URL (อาทิ /product/99?tab=reviews)
  const currentTab = searchParams.tab || 'description';

  return (
    <div>
      <h1>ข้อมูลสินค้า: {product.name} (รหัส: {params.id})</h1>
      {currentTab === 'reviews' ? <ReviewSection /> : <DescriptionSection />}
    </div>
  );
}

app/
 ├── (marketing)/         # โฟลเดอร์กลุ่มผู้ใช้ทั่วไป
 │    ├── layout.tsx      # โครงสร้างสำหรับหน้าหลักทั่วไป
 │    ├── page.tsx        # ตรงกับหน้าเว็บหน้าแรกสุด (/) 
 │    └── about/page.tsx  # ตรงกับ (/about)
 │
 └── (admin)/             # โฟลเดอร์กลุ่มผู้ดูแลระบบ
      ├── layout.tsx      # โครงสร้างสำหรับการจัดการหลังบ้าน
      └── dashboard/page.tsx # ตรงกับ (/dashboard)

// app/products/page.tsx
export default async function ProductsPage() {
  // ดึงข้อมูลตลอดการเรียกและระบุให้อัปเดตแคชใหม่ในทุกๆ 60 วินาที
  const response = await fetch("https://api.example.com/products", {
    next: { revalidate: 60 },
  });

  if (!response.ok) throw new Error("ไม่สามารถทำการดึงข้อมูลสินค้ามาแสดงผลได้");

  const products = await response.json();

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

// app/dashboard/page.tsx
import { Suspense } from 'react';
import RevenueChart from '@/components/RevenueChart'; // (คอมโพเนนต์ที่ดึงข้อมูลด้วยระยะเวลาหน่วงที่นาน)
import UserStats from '@/components/UserStats';       // (คอมโพเนนต์ที่ดึงให้ไว)

export default function Dashboard() {
  return (
    <main>
      <h1>หน้าแผงควบคุมหลัก</h1>
      
      {/* จะแสดงผลออกมาให้เห็นก่อนอย่างรวดเร็ว */}
      <UserStats /> 
      
      {/* จะแสดงชุดข้อความ "fallback" ระหว่างรอการประมวลผลขัอมูล และสลับหน้า Component เมื่อข้อมูลจากฐานสำเร็จ */}
      <Suspense fallback={<p>กำลังประมวลผลสถิติรายได้ กรุณารอสักครู่...</p>}>
        <RevenueChart />
      </Suspense>
    </main>
  );
}

// app/actions/postActions.ts
"use server"; // ← ทุกฟังก์ชัน export ในไฟล์นี้จะกลายเป็น Server Function ทั้งหมด

import { db } from "@/lib/db";
import { revalidatePath } from "next/cache";

export async function createPost(data: { title: string; content: string }) {
  await db.post.create({ data });
  revalidatePath("/posts");
  return { success: true };
}

export async function deletePost(id: string) {
  await db.post.delete({ where: { id } });
  revalidatePath("/posts");
}

// app/posts/page.tsx  ← ไฟล์นี้เป็น Server Component (ไม่มี "use client")
export default function PostsPage() {

  // ประกาศ Server Action ข้างในได้เลย ไม่ต้องแยกไฟล์
  async function handleDelete(formData: FormData) {
    "use server"; // ← ประกาศเฉพาะฟังก์ชันนี้
    const id = formData.get("id") as string;
    await db.post.delete({ where: { id } });
    revalidatePath("/posts");
  }

  return (
    <form action={handleDelete}>
      <input type="hidden" name="id" value="post-123" />
      <button type="submit">ลบโพสต์</button>
    </form>
  );
}

// app/actions/userActions.ts
"use server";

import { revalidatePath } from "next/cache";

// signature สำหรับใช้กับ useActionState: (prevState, formData)
export async function createUser(prevState: any, formData: FormData) {
  const name  = formData.get("name") as string;
  const email = formData.get("email") as string;

  if (!name || !email) {
    return { error: "กรุณากรอกข้อมูลให้ครบถ้วน" };
  }

  // เชื่อมต่อ Database ได้โดยตรง (โค้ดส่วนนี้ไม่มีวันรั่วไปยัง Browser)
  await db.user.create({ data: { name, email } });

  revalidatePath("/users"); // บอก Next.js ให้ทำการ Re-fetch หน้า /users ใหม่
  return { success: true, message: `เพิ่มผู้ใช้ "${name}" สำเร็จแล้ว` };
}

// app/users/create/page.tsx
"use client";

import { useActionState } from "react";
import { createUser } from "@/actions/userActions";

export default function CreateUserForm() {
  // useActionState(action, initialState)
  // → state   : ค่า return ล่าสุดจาก action
  // → formAction : ฟังก์ชันที่ส่งให้ form action={...}
  // → isPending  : true ขณะรอ Server ประมวลผล
  const [state, formAction, isPending] = useActionState(createUser, null);

  return (
    <form action={formAction}>
      <input type="text"  name="name"  placeholder="ชื่อผู้ใช้" required />
      <input type="email" name="email" placeholder="อีเมล" required />

      <button type="submit" disabled={isPending}>
        {isPending ? "กำลังบันทึก..." : "เพิ่มผู้ใช้"}
      </button>

      {/* แสดงผลลัพธ์จาก Server */}
      {state?.error   && <p className="text-red-500">{state.error}</p>}
      {state?.success && <p className="text-green-500">{state.message}</p>}
    </form>
  );
}

// app/actions/likeActions.ts
"use server";

import { revalidatePath } from "next/cache";

// รับ argument ปกติได้เลย (ไม่บังคับ FormData)
export async function toggleLike(postId: string, userId: string) {
  const existing = await db.like.findFirst({ where: { postId, userId } });

  if (existing) {
    await db.like.delete({ where: { id: existing.id } });
  } else {
    await db.like.create({ data: { postId, userId } });
  }

  revalidatePath(`/posts/${postId}`);
  return { liked: !existing };
}

// app/components/LikeButton.tsx
"use client";

import { useState, useTransition } from "react";
import { toggleLike } from "@/actions/likeActions";

export function LikeButton({ postId, userId, initialLiked }: {
  postId: string;
  userId: string;
  initialLiked: boolean;
}) {
  const [liked, setLiked] = useState(initialLiked);
  const [isPending, startTransition] = useTransition();

  const handleClick = () => {
    // startTransition ป้องกัน UI กระตุก และติดตามสถานะ pending ให้
    startTransition(async () => {
      const result = await toggleLike(postId, userId); // เรียก Server Function โดยตรง
      setLiked(result.liked);
    });
  };

  return (
    <button onClick={handleClick} disabled={isPending}>
      {liked ? "❤️ ถูกใจแล้ว" : "🤍 ถูกใจ"}
    </button>
  );
}

// app/actions/postActions.ts
"use server";

export async function updatePost(postId: string, prevState: any, formData: FormData) {
  //                            ↑ bind argument    ↑ useActionState args
  const title = formData.get("title") as string;
  await db.post.update({ where: { id: postId }, data: { title } });
  revalidatePath(`/posts/${postId}`);
  return { success: true };
}

// app/posts/[id]/edit/page.tsx
"use client";

import { useActionState } from "react";
import { updatePost } from "@/actions/postActions";

export default function EditPostForm({ postId }: { postId: string }) {
  // ผูก postId เข้าไปเป็น argument แรกถาวร ด้วย .bind()
  const updatePostWithId = updatePost.bind(null, postId);
  const [state, formAction, isPending] = useActionState(updatePostWithId, null);

  return (
    <form action={formAction}>
      <input type="text" name="title" defaultValue="ชื่อโพสต์เดิม" />
      <button type="submit" disabled={isPending}>บันทึกการแก้ไข</button>
    </form>
  );
}

// app/components/TodoItem.tsx
"use client";

import { useOptimistic, useTransition } from "react";
import { toggleTodo } from "@/actions/todoActions";

export function TodoItem({ todo }: { todo: { id: string; done: boolean; text: string } }) {
  const [optimisticDone, setOptimisticDone] = useOptimistic(todo.done);
  const [, startTransition] = useTransition();

  const handleToggle = () => {
    startTransition(async () => {
      setOptimisticDone(!optimisticDone); // ← อัปเดต UI ทันทีเลย
      await toggleTodo(todo.id);          // ← รอ Server ทำงานเงียบๆ อยู่เบื้องหลัง
    });
  };

  return (
    <div>
      <input type="checkbox" checked={optimisticDone} onChange={handleToggle} />
      <span style={{ textDecoration: optimisticDone ? "line-through" : "none" }}>
        {todo.text}
      </span>
    </div>
  );
}

// app/actions/safeActions.ts
"use server";

export async function safeCreateUser(prevState: any, formData: FormData) {
  try {
    const email = formData.get("email") as string;

    // validation
    if (!email.includes("@")) {
      return { status: "error", message: "รูปแบบอีเมลไม่ถูกต้อง" };
    }

    // ตรวจสอบซ้ำใน Database
    const exists = await db.user.findUnique({ where: { email } });
    if (exists) {
      return { status: "error", message: "อีเมลนี้มีในระบบแล้ว" };
    }

    await db.user.create({ data: { email } });
    revalidatePath("/users");

    return { status: "success", message: "สร้างบัญชีสำเร็จแล้ว!" };

  } catch (e) {
    // กรณี Database ล่มหรือมี unexpected error
    console.error("[safeCreateUser]", e);
    return { status: "error", message: "เซิร์ฟเวอร์ขัดข้อง กรุณาลองใหม่อีกครั้ง" };
  }
}

// app/api/webhook/route.ts
import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
  try {
    const data = await req.json();
    return NextResponse.json({ success: true, payload: data });
  } catch (error) {
    return NextResponse.json(
      { success: false, error: "กระบวนรับข้อมูลแบบ JSON ขัดข้อง" },
      { status: 400 }
    );
  }
}

// app/components/FancyButton.tsx
"use client";

// สำหรับฝั่ง Application Router ปัจจุบัน การเรียก Hook จะต้องถูก import จาก next/navigation
import { useRouter, usePathname } from 'next/navigation'; 

export default function FancyButton() {
  const router = useRouter();
  const pathname = usePathname(); 

  const handleClick = () => {
    // สมมติฐานกรณีมีกระบวนการคำนวณและบันทึกบางอย่างที่คลายเอนต์ก่อน
    console.log("บันทึกการส่งสำเร็จแล้ว ระบบจะทำการเปลี่ยนเส้นทาง...");
    router.push('/success-page');
  };

  return (
    <button 
      onClick={handleClick}
      className={pathname === '/success-page' ? 'bg-red-500' : 'bg-blue-500'}
    >
      ยืนยันการทำรายการ
    </button>
  );
}

import Image from "next/image";
import Link from "next/link";
import { Inter } from "next/font/google";

const interFont = Inter({ subsets: ["latin"] });

export default function Header() {
  return (
    <header className={interFont.className}>
      <nav><Link href="/dashboard">หน้าต่างควบคุม Dashboard</Link></nav>
      <Image
        src="/banner.jpg"
        alt="Promotion Banner"
        width={800}
        height={300}
        priority 
      />
    </header>
  );
}

// app/articles/[slug]/page.tsx
import { Metadata } from 'next';

// ฟังก์ชันจะประมวลผลทางเซิร์ฟเวอร์ เพื่อดึงค่ามาจัดวางโครงสร้างและเริ่มสร้างเอกสารจอภาพหลักตามลำดับ
export async function generateMetadata({ params }): Promise<Metadata> {
  const article = await getArticleBySlug(params.slug);
  
  return {
    title: `${article.title} | Developer Blog`,
    description: article.summary,
    openGraph: {
      images: [article.thumbnailUrl], 
    },
  };
}

export default function ArticlePage({ params }) {
  return <article>...</article>;
}

// middleware.ts (ตำแหน่งอยู่นอกสุดของระเบียบโครงสร้าง src)
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  const token = request.cookies.get("session_token");

  // ประเมินผลกรณีที่ผู้ใช้งานติดต่อเข้ามายังโฟลเดอร์ /admin ทว่ายังขาดการยืนยันคีย์
  if (request.nextUrl.pathname.startsWith("/admin") && !token) {
    // กำหนดการเปลี่ยนเส้นทางตีกลับให้ไปยังหน้าจอเข้าสู่ระบบแทนที่
    return NextResponse.redirect(new URL("/login", request.url));
  }
  
  return NextResponse.next();
}

export const config = {
  matcher: ["/admin/:path*"], // นำระบบตรวจจับมารองรับเฉพาะพื้นที่ของ /admin เพื่อไม่เพิ่มภาระที่ไม่จำเป็นกับพื้นที่ส่วนอื่นๆ
};

// ❌ เค้าโครงอ้างอิงตัวแปรแบบเก่า อาจเสี่ยงต่อความผิดพลาดเมื่อโยกย้ายไฟล์
import Button from '../../../../components/ui/Button';

// ✅ การระบุเครื่องหมาย @ เพื่อเป็นตัวเชื่อม Path โฟลเดอร์ต้นกำเนิดตลอดการใช้งาน (Best Practice)
import Button from '@/components/ui/Button';
import { db } from '@/lib/database';

// แนวทางการใช้งานฟังก์ชันฝั่ง Server
import { cookies } from 'next/headers';
import { redirect, notFound } from 'next/navigation';

export async function checkAccessAndFetch(id: string) {
  const cookieStore = await cookies();
  
  if (!cookieStore.has('auth_token')) {
    redirect('/login'); // เปลี่ยนเส้นทางหากยังไม่ยืนยันตัวตน
  }
  
  const data = await getSecureData(id);
  
  if (!data) {
    notFound(); // ทิ้งน้ำหนักหน้าไปสู่ 404 ทันที
  }
  
  return data;
}