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 能力的现代框架。
Vercel Functions
与 Web 框架和 Vercel 部署流程深度集成的托管 Serverless 计算服务。
查看项目Astro
面向内容网站的 Web 框架，默认发送更少的客户端 JavaScript。
查看项目Svelte
将组件编译为精简 JavaScript 的现代 Web UI 框架。
查看项目Nuxt
基于 Vue 的全栈 Web 框架，统一路由、服务端渲染、数据获取与后端 API。
查看项目shadcn/ui
把可访问、可组合的组件源码直接加入项目，由团队完整拥有和定制的 UI 分发平台。
查看项目TanStack Query
面向 Web 应用的异步服务端状态管理工具，统一处理请求缓存、同步、失效、Mutation 和后台更新。
查看项目Turborepo
面向 JavaScript 与 TypeScript Monorepo 的高性能构建系统，通过任务图、并行调度和缓存减少重复工作。
查看项目Better Auth
框架无关、类型安全的 TypeScript 认证与授权框架，提供数据库适配器、客户端 SDK 和丰富插件。
查看项目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 日。该状态表示项目近期仍有公开维护活动，不代表固定发布频率或长期支持承诺。