简介
欢迎来到 Next.js 文档！
什么是 Next.js？
Next.js 是一个用于构建全栈 Web 应用的 React 框架。您可以使用 React 组件构建用户界面，并通过 Next.js 获得额外的功能与优化。
在底层，Next.js 还抽象并自动配置了 React 所需的工具链，例如打包 (bundling)、编译 (compiling) 等。这让您能专注于构建应用，而无需花费时间在配置上。
无论您是独立开发者还是团队一员，Next.js 都能帮助您构建交互式、动态且快速的 React 应用。
主要特性
Next.js 的主要功能包括：
| 特性 | 描述 |
|---|---|
| 路由 (Routing) | 基于文件系统的路由系统，构建在服务端组件 (Server Components) 之上，支持布局 (layouts)、嵌套路由 (nested routing)、加载状态 (loading states)、错误处理 (error handling) 等功能。 |
| 渲染 (Rendering) | 支持客户端组件 (Client Components) 和服务端组件 (Server Components) 的客户端渲染 (CSR) 与服务端渲染 (SSR)。通过 Next.js 进一步优化为服务端静态渲染 (Static Rendering) 和动态渲染 (Dynamic Rendering)。支持 Edge 和 Node.js 运行时的流式渲染 (Streaming)。 |
| 数据获取 (Data Fetching) | 简化服务端组件中的数据获取，支持 async/await 语法，扩展了 fetch API 以实现请求记忆化 (memoization)、数据缓存 (caching) 和重新验证 (revalidation)。 |
| 样式 (Styling) | 支持多种样式方案，包括 CSS Modules、Tailwind CSS 和 CSS-in-JS |
| 优化 (Optimizations) | 提供图片 (Image)、字体 (Fonts) 和脚本 (Scripts) 优化，以提升应用的核心 Web 指标 (Core Web Vitals) 和用户体验。 |
| TypeScript | 增强的 TypeScript 支持，包括更完善的类型检查和高效编译，以及自定义 TypeScript 插件和类型检查器。 |
如何使用本文档
在屏幕左侧，您会看到文档导航栏。文档页面按从基础到高级的顺序组织，方便您按步骤构建应用。当然，您也可以按任意顺序阅读，或直接跳转到与您用例相关的页面。
在屏幕右侧，您会看到当前页面的目录，便于快速跳转至特定章节。如需快速查找页面，可使用顶部的搜索栏或搜索快捷键（Ctrl+K 或 Cmd+K）。
要开始使用，请查看 安装指南。
App Router 与 Pages Router
Next.js 提供两种路由模式：App Router 和 Pages Router。App Router 是新一代路由系统，支持 React 的最新特性，如服务端组件 (Server Components) 和流式渲染 (Streaming)。Pages Router 是 Next.js 原有的路由系统，用于构建服务端渲染的 React 应用，目前仍为旧版 Next.js 应用提供支持。
在侧边栏顶部，您会看到一个下拉菜单，用于切换 App Router 和 Pages Router 的功能文档。由于两种路由有各自独有的特性，请注意当前选中的标签页。
页面顶部的面包屑导航也会显示您当前查看的是 App Router 还是 Pages Router 的文档。
预备知识
虽然本文档设计为对新手友好，但我们仍需要设定一些基础知识基准，以便专注于 Next.js 功能的讲解。在引入新概念时，我们会提供相关文档的链接。
为了更好地理解文档内容，建议您具备 HTML、CSS 和 React 的基础知识。如需复习 React，请查看我们的 Next.js 基础课程，该课程将带您了解核心概念。
无障碍访问
为了在使用屏幕阅读器时获得最佳的无障碍体验，我们推荐使用 Firefox + NVDA 或 Safari + VoiceOver 组合。
加入社区
如果您对 Next.js 有任何疑问，欢迎随时通过 GitHub Discussions、Discord、Twitter 或 Reddit 联系我们的社区。