Next.js
基于 React 的全栈 Web 框架，覆盖渲染、路由和部署。
项目概述
Next.js 提供文件路由、服务端组件、静态生成和服务端渲染等能力，适用于内容站、SaaS 产品和大型 Web 应用。
Next.js 由 Vercel 和开源社区共同维护，并采用 MIT 许可证。它在 React 之上提供 App Router、服务端与客户端组件、数据获取、缓存、流式渲染、服务端函数和 Route Handlers 等完整应用能力，同时内置图片、字体、脚本与 Metadata 优化，可部署到 Vercel、自托管 Node.js 或其他兼容平台。
主要特点
Next.js 构建现代 React 全栈应用的核心能力。
App Router
通过文件系统定义页面、嵌套布局、动态路由、加载、错误和 Not Found 状态，并支持路由级代码拆分。
Server Components
页面和布局默认在服务端运行，可以靠近数据源读取数据库和 API、保护密钥，并减少发送到浏览器的 JavaScript。
流式渲染
配合 Suspense、loading.tsx 和路由分段逐步发送界面，让较慢的数据区域不会阻塞整页内容显示。
全栈数据能力
Server Functions/Actions 可处理数据变更，Route Handlers 使用标准 Request/Response API 构建接口与 Webhook。
缓存与重新验证
支持组件或数据级缓存、时间策略、标签和路径重新验证，在动态内容与可缓存内容之间精细取舍。
内置生产优化
提供图片、字体、Metadata、脚本、导航预取和构建优化，并以 Turbopack 改善本地开发与构建体验。
适用场景
当项目需要 React、服务端能力和完整生产工具链时，Next.js 通常是成熟的起点。
SaaS 与业务应用
适合认证、订阅、团队协作、复杂表单和数据密集型工作台等需要前后端协同的产品。
电商平台
商品内容可缓存和重新验证，价格、库存、购物车与结账流程则可以使用动态服务端能力。
内容与媒体网站
静态生成、流式 SSR、Metadata、图片优化和 CMS 集成适合新闻、博客及大型内容平台。
管理后台与门户
嵌套路由、共享布局、服务端数据获取和客户端交互组件适合复杂权限与多模块界面。
Web API 与 BFF
Route Handlers、Server Actions 和中间层能力可为前端页面提供贴近界面的服务端接口。
优点与注意事项
技术选型不仅要看能力，也要理解它带来的团队成本。
主要优点
Next.js 擅长的地方
- React 前后端能力整合度高，拥有清晰的官方生产路径
- Server Components 可直接访问数据源并减少客户端 JavaScript
- 静态、动态、流式和缓存内容能够在同一路由树中组合
- 路由、图片、字体、Metadata 和构建优化无需大量额外选型
- 社区、部署方案、第三方集成和人才储备非常丰富
需要注意
采用前应考虑的问题
过度使用 "use client" 会扩大客户端包，而把交互逻辑放在 Server Component 中又不可行，团队需要理解组件边界和可序列化 Props。
静态、动态、use cache、cacheLife、标签和路径重新验证会直接影响数据新鲜度，应针对业务逐项设计并测试。
App Router、React 新能力和构建工具持续演进，升级前需要阅读迁移指南并验证第三方库兼容性。
对于纯静态内容或极少交互的网站，Next.js 的服务端组件、缓存和运行时概念可能比 Astro 等内容框架更重。
Next.js 可以自托管，但图片优化、缓存、流式响应和部分平台集成功能需要确认目标基础设施的支持方式。
快速开始
使用官方 create-next-app 默认配置创建一个 TypeScript App Router 项目。
bashnpx create-next-app@latest my-next-app --yes
cd my-next-app
npm run devtsximport type { Metadata } from "next";
import ProjectSearch from "./ui/project-search";
export const metadata: Metadata = {
title: "开源项目",
description: "发现值得关注的开源项目",
};
const projects = ["Next.js", "React", "Astro", "Svelte"];
export default function Page() {
return (
<main>
<h1>开源项目</h1>
<ProjectSearch projects={projects} />
</main>
);
}tsx"use client";
import { useState } from "react";
export default function ProjectSearch({
projects,
}: {
projects: string[];
}) {
const [query, setQuery] = useState("");
const visible = projects.filter((project) =>
project.toLowerCase().includes(query.toLowerCase()),
);
return (
<>
<input
value={query}
onChange={(event) => setQuery(event.target.value)}
placeholder="搜索项目"
/>
<ul>
{visible.map((project) => <li key={project}>{project}</li>)}
</ul>
</>
);
}bashnpm run lint
npm run build
npm start下一步：优先把页面和数据读取保留在 Server Components 中，只把需要状态、事件或浏览器 API 的最小组件标记为 "use client"；随后再根据数据新鲜度显式设计缓存和重新验证策略。
类似项目
同样提供文件路由、服务端渲染和全栈 Web 能力的现代框架。
Next.js vs Astro
Next.js 和 Astro 都支持静态与服务端渲染，但 Next.js 面向完整 React 应用，Astro 更强调内容优先和局部 Islands。
| 比较维度 | Next.js | Astro |
|---|---|---|
| 核心定位 | 基于 React 的全栈应用框架 | 内容驱动的多框架 Web 框架 |
| UI 框架 | React | Astro 组件，并可混用 React、Vue、Svelte 等 |
| 客户端交互 | 通过 "use client" 定义客户端组件边界 | 通过 client:* 指令创建独立 Islands |
| 默认组件模型 | 页面与布局默认是 React Server Components | .astro 组件默认输出无客户端运行时的 HTML |
| 数据与后端 | Server Actions、Route Handlers、缓存与完整全栈能力 | 数据获取、Actions、SSR 和适配器，内容能力更突出 |
| 内容管理 | 通常结合 MDX、CMS 或自定义数据层 | 内置 Content Collections 与 Markdown/MDX 工作流 |
| 更适合 | SaaS、电商、后台和复杂 React 产品 | 博客、文档、营销站和内容型网站 |
如果应用以持续交互、用户状态和 React 全栈逻辑为核心，选择 Next.js；如果页面主要由内容组成，只在少量区域需要交互，并希望默认发送更少客户端 JavaScript，Astro 通常更轻量。
资料核验
版本、维护信息与本页采用的官方资料来源。
本次核验覆盖 Next.js 的核心定位、主要能力、官方入口与开源许可。项目版本持续更新，具体补丁版本、兼容性和迁移要求请在采用前继续核对官方发布记录。
官方仓库未归档，核验时最近可见的代码活动日期为 2026 年 7 月 25 日。该状态表示项目近期仍有公开维护活动，不代表固定发布频率或长期支持承诺。