🙋 你是否遇到过这样的问题：用 React 构建的单页应用首屏加载太慢，SEO 效果差，想做服务端渲染却不知从何下手？
Next.js 正是为解决这些问题而生的 React 全栈框架。
什么是 Next.js
Next.js 是由 Vercel 开发维护的 React 全栈框架。它在 React 的基础上提供了一系列开箱即用的功能：服务端渲染、静态站点生成、API 路由、文件系统路由等。
🎯 核心定位：让开发者专注于产品开发，而不是底层工具链配置。
# 环境要求：Node.js 20+, pnpm 9+# Next.js 15.x
# 一行命令创建项目pnpm create next-app@latest my-app运行后会看到交互式提示，选择 TypeScript、ESLint、Tailwind CSS 等配置项。整个过程不到一分钟就能启动一个完整的项目。
核心特性一览
Next.js 15 带来了多项重要更新，以下是最值得关注的特性：
1. App Router（推荐）
Next.js 13 引入的 App Router 已经成为默认推荐方案。它基于 React Server Components 构建，支持：
- 嵌套布局：共享 UI 无需重复渲染
- 服务端组件：默认在服务端执行，减少客户端 JS 体积
- 流式渲染：逐步发送 HTML，提升首屏速度
// app/layout.tsx - 根布局// Next.js 15.xexport default function RootLayout({ children,}: { children: React.ReactNode}) { return ( <html lang="zh-CN"> <body>{children}</body> </html> )}// app/page.tsx - 首页// Next.js 15.xexport default function Home() { return <h1>欢迎使用 Next.js 15</h1>}这两个文件就构成了一个可运行的页面。layout.tsx 定义共享布局，page.tsx 定义页面内容。
2. Turbopack 默认启用
Next.js 15 将 Turbopack 设为默认打包器（开发模式）。相比 Webpack，Turbopack 使用 Rust 编写，启动速度和热更新速度都有显著提升。
{ "scripts": { "dev": "next dev" // 自动使用 Turbopack }}🔶 注意：如果项目有自定义 Webpack 配置，需要手动迁移到 Turbopack 或使用 --webpack 标志回退。
3. Server Components 与 Client Components
Next.js 的组件默认为 Server Components，在服务端执行：
// app/users/page.tsx - Server Component（默认）// Next.js 15.xasync function getUsers() { const res = await fetch('https://api.example.com/users') return res.json()}
export default async function UsersPage() { const users = await getUsers()
return ( <ul> {users.map((user: { id: number; name: string }) => ( <li key={user.id}>{user.name}</li> ))} </ul> )}需要交互能力时，使用 "use client" 指令：
// components/Counter.tsx - Client Component// Next.js 15.x'use client'
import { useState } from 'react'
export default function Counter() { const [count, setCount] = useState(0)
return <button onClick={() => setCount(count + 1)}>点击次数：{count}</button>}4. Server Actions
Server Actions 允许在客户端直接调用服务端函数，无需手动创建 API 端点：
// Next.js 15.x'use server'
export async function createUser(formData: FormData) { const name = formData.get('name') // 直接操作数据库 // await db.user.create({ data: { name } }) return { success: true }}// Next.js 15.ximport { createUser } from '../actions'
export default function FormPage() { return ( <form action={createUser}> <input name="name" placeholder="用户名" /> <button type="submit">提交</button> </form> )}表单提交自动调用服务端函数，代码简洁且类型安全。
Next.js vs 纯 React vs Nuxt
| 特性 | 纯 React (Vite) | Next.js | Nuxt (Vue) |
|---|---|---|---|
| 渲染模式 | CSR | SSR/SSG/ISR/CSR | SSR/SSG/ISR/CSR |
| 路由 | 需配置 | 文件系统路由 | 文件系统路由 |
| API 路由 | 无 | 内置 | 内置 |
| 部署 | 静态托管 | Vercel/自托管 | Vercel/自托管 |
| 学习曲线 | 低 | 中 | 中 |
✅ 选择 Next.js 的理由：
- 需要 SEO 友好的 React 应用
- 希望前后端代码放在同一项目
- 追求开箱即用的开发体验
- 团队熟悉 React 生态
🔶 不适合的场景：
- 纯静态官网（可考虑 Astro）
- 对 bundle 体积极度敏感的移动端 H5
- 团队更熟悉 Vue（应选 Nuxt）
快速体验
创建一个带有数据获取的完整示例：
# 创建项目pnpm create next-app@latest nextjs-demo --typescript --tailwind --eslint --app
cd nextjs-demo// Next.js 15.x, TypeScript 5.x
interface Post { id: number title: string body: string}
async function getPosts(): Promise<Post[]> { const res = await fetch( 'https://jsonplaceholder.typicode.com/posts?_limit=5', { next: { revalidate: 60 } } // 60秒后重新验证 ) return res.json()}
export default async function PostsPage() { const posts = await getPosts()
return ( <main className="p-8"> <h1 className="text-2xl font-bold mb-4">文章列表</h1> <ul className="space-y-4"> {posts.map((post) => ( <li key={post.id} className="p-4 border rounded"> <h2 className="font-semibold">{post.title}</h2> <p className="text-gray-600 mt-2">{post.body}</p> </li> ))} </ul> </main> )}# 启动开发服务器pnpm dev
这个示例展示了：
- 服务端数据获取（async 组件）
- ISR 缓存策略（revalidate: 60）
- TypeScript 类型定义
- Tailwind CSS 样式
常见问题
🤔 Q: Pages Router 还能用吗？
可以。Pages Router 仍受支持，App Router 和 Pages Router 可以共存。但新项目推荐使用 App Router，它代表了 Next.js 的未来方向。
🤔 Q: 必须部署到 Vercel 吗？
不是。Next.js 支持自托管，可以部署到任何支持 Node.js 的平台，也支持导出为纯静态站点。
🤔 Q: 和 Remix 比怎么选？
两者都是优秀的 React 全栈框架。Next.js 生态更成熟，社区资源更丰富；Remix 在表单处理和嵌套路由方面有独特设计。如果没有特殊偏好，Next.js 是更稳妥的选择。
下一篇将详细介绍项目创建与配置，包括目录结构解析和 next.config.js 常用配置。
-EOF-