核心特性
React Server Components
服务端组件零 Bundle 体积，可直接访问数据库和文件系统，与客户端组件无缝混合，流式渲染。
Server Actions
表单提交和服务端变更的新模式，无需编写 API 端点，直接在组件中调用服务端函数。
多种渲染模式
SSR（服务端渲染）、SSG（静态生成）、ISR（增量静态再生）、PPR（部分预渲染）按需选择。
App Router
基于文件系统的路由，支持嵌套布局、并行路由、拦截路由、路由组等高级特性。
内置功能
API Routes
在 Next.js 中直接编写 API 端点，支持 REST API 和 Route Handlers，无需额外后端服务。
Image Optimization
内置 next/image 组件，自动优化图片格式、大小和懒加载，支持 WebP/AVIF。
Font Optimization
next/font 自动内联 Google Fonts 和本地字体，消除布局偏移，零额外网络请求。
Middleware
在请求完成之前运行代码，实现身份验证、A/B 测试、地理位置重定向等功能。
Analytics
内置 Web Vitals 监控，与 Vercel Analytics 深度集成，自动收集性能指标。
Turbopack
基于 Rust 的打包工具，Webpack 的继任者，开发服务器启动速度提升 10 倍以上。
快速入门
// app/page.tsx - Next.js App Router 页面
import { Suspense } from 'react';
// 服务端组件 - 零客户端 JS
async function getData() {
const res = await fetch('https://api.example.com/data');
return res.json();
}
// 客户端组件
'use client';
function Interactive() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}
export default async function Page() {
const data = await getData();
return (
<main>
<h1>{data.title}</h1>
<Suspense fallback={<p>加载中...</p>}>
<Interactive />
</Suspense>
</main>
);
}