Next.js: Next.js 16 简介

// app/dashboard/page.tsx — Server Component 默认
export default async function DashboardPage() {
  const tasks = await fetch('https://api.example.com/tasks');
  const projects = await fetch('https://api.example.com/projects');

  return (
    <div className="grid grid-cols-2 gap-4">
      <TaskSummary tasks={tasks} />
      <ProjectList projects={projects} />
    </div>
  );
}

# 1. 使用 create-next-app 创建项目（推荐）
npx create-next-app@latest my-next-app --ts --tailwind --app

# 2. 进入项目目录
cd my-next-app

# 3. 启动开发服务器（Turbopack 默认）
npm run dev

# 4. 终端输出节选
▲  ▲  ▲  ▲  ▲  ▲
 ▲  Next.js 16.2.10 (Turbopack)
 ▲  Local:        http://localhost:3000
 ▲  Environments: .env.local

▲ Next.js 16.2.10
- Local: http://localhost:3000
✓ Ready in 876ms (Turbopack)

// app/page.tsx — 一个页面 = 数据获取 + 渲染 + 交互
export default async function HomePage() {
  const data = await fetch('https://jsonplaceholder.typicode.com/posts/1');

  return (
    <main>
      <h1 className="text-2xl font-bold">Welcome to Next.js 16</h1>
      <p>Server-rendered content: {data.title}</p>
    </main>
  );
}

<h1>Welcome to Next.js 16</h1>
<p>Server-rendered content: sunt aut facere repellat provident</p>

// Pages Router 旧模式 (v12)
export async function getServerSideProps() {
  return { props: { data: await fetchData() } };
}
export default function Page({ data }) {
  return <div>{data}</div>; // 所有代码在客户端
}

// App Router 新模式 (v16)
export default async function Page() {
  const data = await fetchData(); // 直接在组件中获取
  return <div>{data}</div>; // 默认 Server Component
}

// ============================================
// Pages Router (pages/posts/[id].tsx)
// 需要额外导出 getServerSideProps
// ============================================
export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  return { props: { post: await res.json() } };
}
export default function PostPage({ post }) {
  return <h1>{post.title}</h1>;
}

// ============================================
// App Router (app/posts/[id]/page.tsx)
// 直接 async component，无需额外导出
// ============================================
export default async function PostPage({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.id}`);
  return <h1>{post.title}</h1>;
}

Pages Router: 18 行代码（含 getServerSideProps）
App Router: 8 行代码（直接 async component）
节省 55% 样板代码

# Next.js 16 启动开发服务器，默认使用 Turbopack
npm run dev

# 控制台输出
▲  ▲
▲  Next.js 16.2
▲  - Local: http://localhost:3000
▲  - Turbopack (experimental): ✓ loaded in 876ms

# 编辑任意文件后保存 — 即时热更新
✔ Updated /app/page.tsx in 3ms

Turbopack 启动时间: 876ms
热更新时间: 3ms
对比 Webpack 冷启动: 5-10s

// app/page.tsx — 使用 use cache 指令
import { unstable_cache as cache } from 'next/cache';

export default async function Page() {
  const data = await getData();
  return <div>{JSON.stringify(data)}</div>;
}

const getData = cache(
  async () => {
    return fetch('https://api.example.com/expensive-data');
  },
  ['expensive-data'],
  { revalidate: 3600 }
);

// ============================================
// PPR 静态壳 + use cache 智能缓存
// 首页 = 静态头部 + 动态推荐内容（缓存 1 小时）
// ============================================

// app/page.tsx
import { Suspense } from 'react';
import { RecommendedProducts } from './RecommendedProducts';

export default function HomePage() {
  return (
    <div>
      <header className="bg-gray-100 p-4">
        <h1>Welcome to ShopHub</h1>
        <nav>Categories | Deals | Support</nav>
      </header>

      {/* PPR 边界：动态推荐内容 */}
      <Suspense fallback={<div className="animate-pulse h-40 bg-gray-200" />}>
        <RecommendedProducts />
      </Suspense>
    </div>
  );
}

// app/RecommendedProducts.tsx
import { unstable_cache as cache } from 'next/cache';

const getProducts = cache(
  async () => {
    return fetch('https://fakestoreapi.com/products?limit=4');
  },
  ['recommended-products'],
  { revalidate: 3600 }
);

export async function RecommendedProducts() {
  const products = await getProducts();
  return (
    <div className="grid grid-cols-4 gap-4 p-4">
      {products.map(p => (
        <div key={p.id} className="border rounded p-2">
          <img src={p.image} alt={p.title} className="h-32" />
          <p className="font-bold">{p.title}</p>
          <p>${p.price}</p>
        </div>
      ))}
    </div>
  );
}

页面加载时：
1. 静态头部（导航栏）立即显示
2. 推荐区域显示骨架屏（灰色占位动画）
3. 数据就绪后，4 个商品卡片流式渲染
4. 同一用户 1 小时内重复访问走缓存，无需重新 fetch

// ============================================
// Server Action：表单提交直接调用后端函数
// 无需手动创建 API Route
// ============================================

// app/contact/page.tsx
export default function ContactPage() {
  async function handleSubmit(formData) {
    'use server';
    const name = formData.get('name');
    const email = formData.get('email');
    // 直接写入数据库或发送邮件
    console.log(`New contact: ${name} <${email}>`);
    // 重定向到成功页面
    redirect('/contact/success');
  }

  return (
    <form action={handleSubmit}>
      <input name="name" placeholder="Your name" required />
      <input name="email" type="email" placeholder="Your email" required />
      <button type="submit">Send</button>
    </form>
  );
}

表单提交后：
1. handleSubmit 函数在服务端执行
2. formData 自动收集表单字段
3. redirect 执行服务端 303 重定向
4. 无需编写 API Route / fetch 代码

// ============================================
// 同一个"用户列表"页面的四框架写法对比
// ============================================

// Next.js 16 (app/users/page.tsx)
export default async function UsersPage() {
  const users = await fetch('https://api.example.com/users');
  return users.map(u => <div key={u.id}>{u.name}</div>);
}

// Remix 2 (app/routes/users.tsx)
export async function loader() {
  return fetch('https://api.example.com/users');
}
export default function UsersPage() {
  const users = useLoaderData();
  return users.map(u => <div key={u.id}>{u.name}</div>);
}

// Nuxt 4 (pages/users.vue)
<script setup>
const { data: users } = await useFetch('https://api.example.com/users');
</script>
<template>
  <div v-for="u in users" :key="u.id">{{ u.name }}</div>
</template>

// Astro 5 (src/pages/users.astro)
---
const response = await fetch('https://api.example.com/users');
const users = await response.json();
---
{users.map(u => <div>{u.name}</div>)}

Next.js 16: 5 行代码，零样板（默认 Server Component）
Remix 2: 12 行代码，需 loader + useLoaderData
Nuxt 4: 10 行代码，需 script setup + useFetch
Astro 5: 8 行代码，零 JS 客户端输出

// ============================================
// 综合示例：电商商品详情页
// 功能：SSG 静态目录 + PPR 推荐 + ISR 评论
// ============================================

// app/products/[id]/page.tsx
import { Suspense } from 'react';
import { notFound } from 'next/navigation';

// 静态页面参数生成（构建时预生成）
export async function generateStaticParams() {
  const products = await fetch('https://fakestoreapi.com/products');
  const ids = await products.json();
  return ids.map(p => ({ id: String(p.id) }));
}

export default async function ProductPage({ params }) {
  const product = await fetch(
    `https://fakestoreapi.com/products/${params.id}`
  );

  if (!product) {
    notFound();
  }

  return (
    <div className="container mx-auto p-4">
      {/* 静态部分：商品基本信息 */}
      <div className="flex gap-8">
        <img src={product.image} alt={product.title} className="w-64 h-64" />
        <div>
          <h1 className="text-2xl font-bold">{product.title}</h1>
          <p className="text-xl text-green-600">${product.price}</p>
          <p className="mt-4">{product.description}</p>
        </div>
      </div>

      {/* PPR 动态边界：推荐商品 */}
      <Suspense fallback={<div>Loading recommendations...</div>}>
        <Recommendations category={product.category} />
      </Suspense>

      {/* ISR 评论区域：每小时重新生成 */}
      <Suspense fallback={<div>Loading reviews...</div>}>
        <Reviews productId={params.id} />
      </Suspense>
    </div>
  );
}

// app/products/[id]/Recommendations.tsx
async function Recommendations({ category }) {
  const products = await fetch(
    `https://fakestoreapi.com/products/category/${category}`
  );
  return (
    <div className="mt-8">
      <h2 className="text-xl font-bold">Recommended Products</h2>
      <div className="grid grid-cols-4 gap-4 mt-4">
        {products.slice(0, 4).map(p => (
          <div key={p.id} className="border p-2 rounded">{p.title}</div>
        ))}
      </div>
    </div>
  );
}

// app/products/[id]/Reviews.tsx
async function Reviews({ productId }) {
  const reviews = await fetch(
    `https://api.example.com/reviews/${productId}`,
    { next: { revalidate: 3600 } }
  );
  return (
    <div className="mt-8">
      <h2 className="text-xl font-bold">Customer Reviews</h2>
      {reviews.map(r => (
        <div key={r.id} className="border-b py-2">
          <p className="font-bold">{r.author}</p>
          <p>{r.content}</p>
        </div>
      ))}
    </div>
  );
}

1. 商品基本信息瞬间显示（SSG 静态 HTML）
2. 推荐区域显示 "Loading recommendations..." 占位
3. 评论区域显示 "Loading reviews..." 占位
4. 推荐内容流式渲染（PPR）
5. 评论内容缓存 1 小时后按需更新（ISR）
6. 整个页面具有完整 SEO 元数据