Next.js cho Developer

app/
├── page.tsx                    → /
├── login/page.tsx              → /login
├── dashboard/
│   ├── layout.tsx              → layout riêng cho toàn bộ /dashboard/*
│   ├── page.tsx                → /dashboard
│   ├── tasks/
│   │   ├── page.tsx            → /dashboard/tasks
│   │   └── [id]/page.tsx       → /dashboard/tasks/123 (dynamic segment)
│   └── (settings)/              → route group, không xuất hiện trong URL
│       └── settings/page.tsx   → /dashboard/settings
└── api/
    └── tasks/route.ts          → /api/tasks (Route Handler)

// app/dashboard/tasks/[id]/page.tsx
export default async function TaskDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const task = await getTask(id);
  return <TaskDetail task={task} />;
}

// app/dashboard/tasks/[id]/page.tsx
export async function generateStaticParams() {
  const tasks = await db.task.findMany({ select: { id: true } });
  return tasks.map((task) => ({ id: task.id }));
}

export default async function TaskDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const task = await getTask(id);
  return <TaskDetail task={task} />;
}

// app/api/tasks/route.ts
export const runtime = "nodejs"; // mặc định — dùng khi cần Node.js API (fs, Buffer, Prisma...)
// export const runtime = "edge"; // nhẹ hơn, khởi động nhanh hơn, nhưng giới hạn API Node.js

// components/task-card.tsx — Server Component (mặc định)
type TaskCardProps = {
  title: string;
  status: "todo" | "in-progress" | "done";
  assignee: string;
};

export function TaskCard({ title, status, assignee }: TaskCardProps) {
  return (
    <div className="rounded-lg border p-4">
      <h3 className="font-medium">{title}</h3>
      <span className="text-sm text-muted-foreground">{assignee}</span>
      <StatusBadge status={status} />
    </div>
  );
}

// app/dashboard/tasks/page.tsx — Server Component
import { TaskFilter } from "./task-filter";

export default async function TasksPage() {
  const tasks = await db.task.findMany(); // chạy trên server, có thể query DB trực tiếp
  return (
    <div>
      <TaskFilter /> {/* Client Component, xử lý tương tác */}
      <ul>
        {tasks.map((t) => (
          <li key={t.id}>{t.title}</li>
        ))}
      </ul>
    </div>
  );
}

// app/dashboard/tasks/task-filter.tsx — Client Component
"use client";

import { useState } from "react";

export function TaskFilter() {
  const [status, setStatus] = useState<"all" | "todo" | "done">("all");
  return (
    <select value={status} onChange={(e) => setStatus(e.target.value as typeof status)}>
      <option value="all">Tất cả</option>
      <option value="todo">Đang làm</option>
      <option value="done">Hoàn thành</option>
    </select>
  );
}

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex">
      <Sidebar />
      <main className="flex-1">{children}</main>
    </div>
  );
}

// app/dashboard/tasks/loading.tsx
export default function TasksLoading() {
  return <TaskListSkeleton rows={5} />;
}

// app/dashboard/tasks/error.tsx
"use client"; // error.tsx bắt buộc là Client Component

export default function TasksError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <div className="p-4 text-center">
      <p>Không tải được danh sách task.</p>
      <button onClick={() => reset()}>Thử lại</button>
    </div>
  );
}

// app/dashboard/tasks/[id]/page.tsx
import type { Metadata } from "next";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ id: string }>;
}): Promise<Metadata> {
  const { id } = await params;
  const task = await getTask(id);
  return {
    title: `${task.title} · Task Manager`,
    description: task.description,
  };
}

import Image from "next/image";

<Image src="/products/rau-cai.jpg" alt="Rau cải xanh hữu cơ" width={400} height={300} priority />;

// app/layout.tsx
import { Inter } from "next/font/google";

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

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="vi" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

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

const createTaskSchema = z.object({
  title: z.string().min(1),
  assigneeId: z.string(),
});

export async function GET() {
  const tasks = await db.task.findMany();
  return NextResponse.json(tasks);
}

export async function POST(request: NextRequest) {
  const body = await request.json();
  const parsed = createTaskSchema.safeParse(body);

  if (!parsed.success) {
    return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
  }

  const task = await db.task.create({ data: parsed.data });
  return NextResponse.json(task, { status: 201 });
}

// app/dashboard/tasks/actions.ts
"use server";

import { revalidateTag } from "next/cache";
import { z } from "zod";

const createTaskSchema = z.object({
  title: z.string().min(1),
  assigneeId: z.string(),
});

export async function createTask(_prevState: unknown, formData: FormData) {
  const parsed = createTaskSchema.safeParse({
    title: formData.get("title"),
    assigneeId: formData.get("assigneeId"),
  });

  if (!parsed.success) {
    return { error: parsed.error.flatten().fieldErrors };
  }

  await db.task.create({ data: parsed.data });
  revalidateTag("tasks");
  return { error: null };
}

// app/dashboard/tasks/task-form.tsx
"use client";

import { useActionState } from "react";
import { createTask } from "./actions";

export function TaskForm() {
  const [state, formAction, isPending] = useActionState(createTask, { error: null });

  return (
    <form action={formAction}>
      <input name="title" placeholder="Tiêu đề task" />
      {state.error?.title && <p className="text-red-500">{state.error.title[0]}</p>}
      <input name="assigneeId" placeholder="Người phụ trách" />
      <button type="submit" disabled={isPending}>
        {isPending ? "Đang lưu..." : "Thêm task"}
      </button>
    </form>
  );
}

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  cacheComponents: true,
};

export default nextConfig;

// proxy.ts
import { NextRequest, NextResponse } from "next/server";

export function proxy(request: NextRequest) {
  const session = request.cookies.get("session");
  if (!session && request.nextUrl.pathname.startsWith("/dashboard")) {
    const loginUrl = request.nextUrl.clone();
    loginUrl.pathname = "/login";
    return NextResponse.redirect(loginUrl);
  }
  return NextResponse.next();
}

export const config = {
  matcher: ["/dashboard/:path*"],
};

Tạo Route Handler POST /api/tasks trong app/api/tasks/route.ts.
Validate body bằng zod schema { title: string, assigneeId: string }.
Trả về 400 với chi tiết lỗi nếu validate fail, 201 kèm task vừa tạo nếu thành công.
Dùng Prisma client đã có sẵn ở lib/db.ts.

Trang app/dashboard/tasks/page.tsx đang fetch toàn bộ danh sách task mỗi lần
render (không cache). Thêm 'use cache' cho hàm getTasks() trong lib/data.ts,
dùng cacheLife('minutes') và cacheTag('tasks'). Đảm bảo revalidateTag('tasks')
được gọi trong action tạo/sửa/xoá task.

Bọc phần <NotificationBell /> trong Suspense với PPR, vì phần còn lại của
layout dashboard (sidebar, header) có thể prerender tĩnh nhưng notification
cần luôn mới nhất theo từng user.

npx create-next-app@latest my-app --typescript --tailwind --app --turbopack
cd my-app
npm run dev

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  cacheComponents: true,
};

export default nextConfig;