npx create-next-app@latest my-blog
cd my-blog
npm run dev

✔ Would you like to use TypeScript?     Yes
✔ Would you like to use ESLint?         Yes
✔ Would you like to use Tailwind CSS?   Yes
✔ Would you like to use App Router?     Yes（推荐）

my-blog/
├── app/                  # App Router 的核心目录
│   ├── layout.tsx        # 根布局（所有页面共享）
│   ├── page.tsx          # 首页 /
│   ├── about/
│   │   └── page.tsx      # /about
│   ├── blog/
│   │   ├── page.tsx      # /blog
│   │   └── [slug]/
│   │       └── page.tsx  # /blog/hello-world
│   └── api/
│       └── posts/
│           └── route.ts  # /api/posts
├── components/           # 公共组件
├── lib/                  # 工具函数
├── public/               # 静态资源
├── package.json
└── next.config.ts

app/
├── page.tsx                  → /
├── about/page.tsx            → /about
├── blog/page.tsx             → /blog
├── blog/[slug]/page.tsx      → /blog/hello, /blog/world
└── dashboard/
    ├── layout.tsx            → dashboard 共享布局
    ├── page.tsx              → /dashboard
    └── settings/page.tsx     → /dashboard/settings

// app/blog/[slug]/page.tsx
export default async function BlogPost({
    params,
}: {
    params: Promise<{ slug: string }>;
}) {
    const { slug } = await params;
    const post = await getPost(slug);

    return (
        <article>
            <h1>{post.title}</h1>
            <p>{post.content}</p>
        </article>
    );
}

// ✅ 这是 Server Component（默认）
// 可以直接访问数据库、文件系统
import { db } from '@/lib/db';

export default async function PostList() {
    const posts = await db.post.findMany(); // 直接查数据库！

    return (
        <ul>
            {posts.map(post => (
                <li key={post.id}>{post.title}</li>
            ))}
        </ul>
    );
}

'use client'; // ← 加这一行，变为客户端组件

import { useState } from 'react';

export default function LikeButton() {
    const [likes, setLikes] = useState(0);

    return (
        <button onClick={() => setLikes(likes + 1)}>
            ❤️ {likes} 赞
        </button>
    );
}

// app/posts/page.tsx
// 无需 useEffect + useState，直接 async/await
export default async function PostsPage() {
    const posts = await fetch('https://api.example.com/posts', {
        next: { revalidate: 3600 }, // ISR：每小时重新验证
    }).then(res => res.json());

    return (
        <div>
            {posts.map(post => (
                <article key={post.id}>
                    <h2>{post.title}</h2>
                    <p>{post.excerpt}</p>
                </article>
            ))}
        </div>
    );
}

// 缓存，默认行为（类似 SSG）
fetch('/api/data');

// 每次请求重新获取（类似 SSR）
fetch('/api/data', { cache: 'no-store' });

// 定时重新验证（ISR — 增量静态再生）
fetch('/api/data', { next: { revalidate: 60 } }); // 60秒

// app/users/page.tsx
import { prisma } from '@/lib/prisma';

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

    return (
        <table>
            <thead>
                <tr><th>姓名</th><th>邮箱</th></tr>
            </thead>
            <tbody>
                {users.map(user => (
                    <tr key={user.id}>
                        <td>{user.name}</td>
                        <td>{user.email}</td>
                    </tr>
                ))}
            </tbody>
        </table>
    );
}

// app/api/posts/route.ts
import { NextResponse } from 'next/server';

// GET /api/posts
export async function GET() {
    const posts = await prisma.post.findMany();
    return NextResponse.json(posts);
}

// POST /api/posts
export async function POST(request: Request) {
    const body = await request.json();
    const post = await prisma.post.create({ data: body });
    return NextResponse.json(post, { status: 201 });
}

// app/api/posts/[id]/route.ts
export async function GET(
    request: Request,
    { params }: { params: Promise<{ id: string }> }
) {
    const { id } = await params;
    const post = await prisma.post.findUnique({ where: { id } });

    if (!post) {
        return NextResponse.json(
            { error: '文章不存在' },
            { status: 404 }
        );
    }

    return NextResponse.json(post);
}

export async function DELETE(
    request: Request,
    { params }: { params: Promise<{ id: string }> }
) {
    const { id } = await params;
    await prisma.post.delete({ where: { id } });
    return NextResponse.json({ success: true });
}

// app/actions.ts
'use server';

import { prisma } from '@/lib/prisma';
import { revalidatePath } from 'next/cache';

export async function createPost(formData: FormData) {
    const title = formData.get('title') as string;
    const content = formData.get('content') as string;

    await prisma.post.create({
        data: { title, content },
    });

    revalidatePath('/posts'); // 刷新缓存
}

// app/new-post/page.tsx
import { createPost } from '@/app/actions';

export default function NewPostPage() {
    return (
        <form action={createPost}>
            <input name="title" placeholder="标题" required />
            <textarea name="content" placeholder="内容" required />
            <button type="submit">发布</button>
        </form>
    );
}

// 1. SSG（默认）— 构建时生成，永不改变
export default function AboutPage() {
    return <div>关于我们</div>;
}

// 2. ISR — 构建时生成，定时刷新
export const revalidate = 3600; // 每3600秒重新生成

// 3. SSR — 每次请求都重新生成
export const dynamic = 'force-dynamic';

// 4. 动态 SSG — 为每条数据预生成页面
export async function generateStaticParams() {
    const posts = await getPosts();
    return posts.map(post => ({ slug: post.slug }));
}

# 生产构建
npm run build

# 启动生产服务器
npm run start