Next.js

Next.js是一个基于React的全栈框架，通过文件系统路由和多种渲染模式（SSG/SSR/CSR）解决单页应用SEO差、首屏加载慢的问题，同时内置工程化配置和API路由，让开发者无需手动搭建Webpack、Babel即可构建高性能Web应用。

核心能力：双路由系统与渲染模式

Next.js提供两套文件系统路由：App Router（v13+，基于React服务器组件、Suspense、服务器函数）和Pages Router（v13之前的主要方式）。App Router支持布局嵌套、加载态、错误边界等文件约定（layout.js、loading.js、error.js），Pages Router则通过pages目录自动映射路由。渲染方面支持静态站点生成（SSG）、服务端渲染（SSR）、增量静态再生（ISR）以及客户端渲染，可在同一项目中混合使用。

• Pages Router: v13前的主要路由方式，直观的文件系统路由
• 渲染模式: 支持SSG、SSR、ISR、CSR，可混合使用
• 文件约定: layout.js、loading.js、error.js、not-found.js等提供开箱即用的页面结构

工程化与开发体验

框架内置Babel、PostCSS、TypeScript、ESLint支持，无需手动配置。开发模式下使用Turbopack进行编译，启动秒启，页面动态编译互不影响。构建时自动进行代码分割、tree-shaking、页面静态化，并输出每个页面的JS资源大小。支持CSS Modules、Sass、Tailwind CSS v3等多种样式方案。

• Turbopack: 开发模式编译工具，启动和页面访问速度极快
• 内置工具链: Babel、PostCSS、TypeScript、ESLint开箱即用
• 样式方案: 支持CSS Modules、Sass、Tailwind CSS v3、CSS-in-JS
• 构建输出: 每次构建显示每个页面首次加载的JS资源大小及公共部分大小

数据获取与缓存策略

Next.js提供多种数据获取方式：服务端组件中直接fetch（支持缓存和重新验证）、客户端组件中使用SWR或React Query。App Router引入cacheLife和cacheTag指令用于细粒度缓存控制，支持'use cache: private'和'use cache: remote'。ISR允许在构建后增量更新静态页面。

• cacheLife/cacheTag: 细粒度缓存控制指令
• ISR: 增量静态再生，构建后按需更新静态页面
• 数据获取函数: getStaticProps、getServerSideProps、getStaticPaths（Pages Router）

API路由与扩展能力

Next.js允许在项目中创建API端点（API Routes），处理HTTP请求和响应。支持Edge Runtime和Turbopack。通过next.config.js可配置重定向、标头、图片优化、Sass选项等。支持MDX编写页面、国际化、多区域部署、自托管等高级场景。

• API Routes: 在项目中创建后端API端点
• Edge Runtime: 支持边缘计算环境

常见问题

Q1：Next.js的App Router和Pages Router有什么区别？

A1：App Router是v13引入的新路由系统，基于文件系统，使用React服务器组件、Suspense等最新功能，支持布局嵌套、加载态、错误边界等文件约定（layout.js、loading.js、error.js）。Pages Router是v13之前的主要方式，通过pages目录自动映射路由，更简单但功能较少。两者可在同一项目中共存，但App Router是官方推荐的新项目选择。

Q2：Next.js中文站（next.nodejs.cn）和nextjs.cn有什么关系？

A2：next.nodejs.cn是Nodejs.cn运营的官方中文站，提供v16.1文档，粤ICP备13048890号。nextjs.cn是另一个社区中文站，冀ICP备15008021号-4，两者独立运营，均翻译自官方文档，遵循MIT协议。

Q3：Next.js支持哪些样式方案？

A3：内置支持CSS Modules和Sass/Scss。可扩展使用Tailwind CSS v3、Styled Components、CSS-in-JS等。通过next.config.js的sassOptions可配置Sass选项。

更多同类工具与网站,可在React分类继续挑选。

信息核实于 2026年7月,具体以官网为准。