npx create-next-app@latest my-app

cd my-app
npm install

npm run dev

my-app/
├── app/                      # App Router：頁面、布局、路由
│   ├── layout.tsx            # 根布局（全局 HTML 殼、字體、Provider）
│   ├── page.tsx              # 路由 "/" 的首頁
│   ├── globals.css           # 全局樣式
│   ├── loading.tsx           # 可選：該路由段的加載 UI（Suspense）
│   ├── error.tsx             # 可選：該路由段的錯(cuò)誤邊界
│   └── api/                  # Route Handlers（HTTP API）
│       └── users/
│           └── route.ts      # 對(duì)應(yīng)路徑 /api/users
├── public/                   # 靜態(tài)資源：favicon、圖片等，URL 根路徑直接訪問
├── prisma/
│   ├── schema.prisma         # 數(shù)據(jù)模型與數(shù)據(jù)庫連接配置
│   └── migrations/           # 遷移歷史（由 prisma migrate 生成，勿手改 SQL 邏輯）
├── lib/                      # 常用：工具函數(shù)、Prisma 單例等（自建）
│   └── prisma.ts
├── components/               # 可復(fù)用 UI 組件（自建）
├── .env                      # 本地環(huán)境變量（勿提交密鑰）
├── .env.example              # 環(huán)境變量示例（可提交）
├── next.config.ts / .js      # Next 構(gòu)建與運(yùn)行時(shí)配置
├── tsconfig.json             # TypeScript 配置
└── package.json

mysql --version

npm install prisma @prisma/client
npx prisma init

DATABASE_URL="mysql://用戶名:密碼@主機(jī):3306/數(shù)據(jù)庫名"

DATABASE_URL="mysql://root:secret@localhost:3306/mydb"

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model User {
  id        Int      @id @default(autoincrement())
  email     String   @unique
  name      String?
  posts     Post[]
  createdAt DateTime @default(now())
}

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  published Boolean  @default(false)
  authorId  Int
  author    User     @relation(fields: [authorId], references: [id])
  createdAt DateTime @default(now())
}

npx prisma generate

npx prisma migrate dev --name 描述本次變更的英文短語

npx prisma migrate dev --name init
npx prisma migrate dev --name add_post_published_index

npx prisma migrate deploy

prisma/migrations/
├── migration_lock.toml       # 鎖定數(shù)據(jù)庫提供方（如 mysql）
└── 20240323120000_init/
    └── migration.sql         # 本次遷移的 SQL（由 Prisma 生成）

import { PrismaClient } from "@prisma/client";

const globalForPrisma = globalThis as unknown as { prisma: PrismaClient };

export const prisma =
  globalForPrisma.prisma ??
  new PrismaClient({
    log: process.env.NODE_ENV === "development" ? ["query", "error", "warn"] : ["error"],
  });

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

import { prisma } from "@/lib/prisma";

export default async function UsersPage() {
  const users = await prisma.user.findMany({
    orderBy: { createdAt: "desc" },
    include: { posts: true },
  });

  return (
    <main>
      <h1>用戶列表</h1>
      <ul>
        {users.map((u) => (
          <li key={u.id}>
            {u.name ?? u.email} — 文章數(shù)：{u.posts.length}
          </li>
        ))}
      </ul>
    </main>
  );
}

import { NextResponse } from "next/server";
import { prisma } from "@/lib/prisma";

export async function GET() {
  const users = await prisma.user.findMany();
  return NextResponse.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const { email, name } = body as { email: string; name?: string };

  const user = await prisma.user.create({
    data: { email, name },
  });

  return NextResponse.json(user, { status: 201 });
}

app/api/users/[id]/route.ts

import { NextResponse } from "next/server";
import { Prisma } from "@prisma/client";
import { prisma } from "@/lib/prisma";

type Ctx = { params: Promise<{ id: string }> };

export async function PATCH(request: Request, ctx: Ctx) {
  const { id } = await ctx.params;
  const userId = Number(id);
  if (Number.isNaN(userId)) {
    return NextResponse.json({ error: "Invalid id" }, { status: 400 });
  }

  const body = await request.json();
  const { name, email } = body as { name?: string; email?: string };

  const data: { name?: string; email?: string } = {};
  if (name !== undefined) data.name = name;
  if (email !== undefined) data.email = email;
  if (Object.keys(data).length === 0) {
    return NextResponse.json({ error: "No fields to update" }, { status: 400 });
  }

  try {
    const user = await prisma.user.update({
      where: { id: userId },
      data,
    });
    return NextResponse.json(user);
  } catch (e) {
    if (e instanceof Prisma.PrismaClientKnownRequestError && e.code === "P2025") {
      return NextResponse.json({ error: "User not found" }, { status: 404 });
    }
    throw e;
  }
}

PATCH /api/users/1 HTTP/1.1
Content-Type: application/json

{"name": "新名字"}

import { NextResponse } from "next/server";
import { Prisma } from "@prisma/client";
import { prisma } from "@/lib/prisma";

type Ctx = { params: Promise<{ id: string }> };

export async function DELETE(_request: Request, ctx: Ctx) {
  const { id } = await ctx.params;
  const userId = Number(id);
  if (Number.isNaN(userId)) {
    return NextResponse.json({ error: "Invalid id" }, { status: 400 });
  }

  try {
    await prisma.user.delete({
      where: { id: userId },
    });
    return new NextResponse(null, { status: 204 });
  } catch (e) {
    if (e instanceof Prisma.PrismaClientKnownRequestError && e.code === "P2025") {
      return NextResponse.json({ error: "User not found" }, { status: 404 });
    }
    throw e;
  }
}

// 將所有未發(fā)布文章標(biāo)為已發(fā)布（示例）
await prisma.post.updateMany({
  where: { published: false },
  data: { published: true },
});

// 刪除某郵箱前綴的測(cè)試用戶（慎用，生產(chǎn)需強(qiáng)校驗(yàn)）
await prisma.user.deleteMany({
  where: { email: { startsWith: "test_" } },
});

/** 部分更新用戶（對(duì)應(yīng) PATCH /api/users/:id） */
export async function updateUser(
  id: number,
  data: { name?: string; email?: string }
): Promise<{ id: number; name: string | null; email: string }> {
  const res = await fetch(`/api/users/${id}`, {
    method: "PATCH",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data),
  });

  const payload = await res.json().catch(() => ({}));

  if (!res.ok) {
    const message =
      typeof payload === "object" && payload !== null && "error" in payload
        ? String((payload as { error: unknown }).error)
        : res.statusText;
    throw new Error(message || `HTTP ${res.status}`);
  }

  return payload as { id: number; name: string | null; email: string };
}

/** 刪除用戶（對(duì)應(yīng) DELETE /api/users/:id，成功為 204 無 body） */
export async function deleteUser(id: number): Promise<void> {
  const res = await fetch(`/api/users/${id}`, {
    method: "DELETE",
  });

  if (res.ok) {
    return;
  }

  let message = res.statusText;
  try {
    const payload = (await res.json()) as { error?: string };
    if (payload.error) message = payload.error;
  } catch {
    /* 無 JSON 時(shí)忽略 */
  }
  throw new Error(message || `HTTP ${res.status}`);
}

"use client";

import { useState } from "react";
import { deleteUser, updateUser } from "@/lib/user-api";

export function UserActions({ userId }: { userId: number }) {
  const [loading, setLoading] = useState<"patch" | "delete" | null>(null);
  const [error, setError] = useState<string | null>(null);

  async function handleRename() {
    setError(null);
    setLoading("patch");
    try {
      const user = await updateUser(userId, { name: "新名字" });
      console.log("更新成功", user);
      // 例如：router.refresh() 或更新本地列表狀態(tài)
    } catch (e) {
      setError(e instanceof Error ? e.message : "更新失敗");
    } finally {
      setLoading(null);
    }
  }

  async function handleDelete() {
    if (!confirm("確定刪除該用戶？")) return;
    setError(null);
    setLoading("delete");
    try {
      await deleteUser(userId);
      console.log("刪除成功");
      // 例如：跳轉(zhuǎn)列表頁或從狀態(tài)中移除
    } catch (e) {
      setError(e instanceof Error ? e.message : "刪除失敗");
    } finally {
      setLoading(null);
    }
  }

  return (
    <div>
      {error && <p role="alert">{error}</p>}
      <button type="button" onClick={handleRename} disabled={loading !== null}>
        {loading === "patch" ? "更新中…" : "修改名字"}
      </button>
      <button type="button" onClick={handleDelete} disabled={loading !== null}>
        {loading === "delete" ? "刪除中…" : "刪除"}
      </button>
    </div>
  );
}

import { prisma } from "@/lib/prisma";

export async function createUserWithPost(email: string, postTitle: string) {
  return prisma.$transaction(async (tx) => {
    const user = await tx.user.create({
      data: { email },
    });
    await tx.post.create({
      data: {
        title: postTitle,
        authorId: user.id,
      },
    });
    return user;
  });
}