跳到主要内容

入门

欢迎来到 Next.js 文档!

什么是 Next.js?

Next.js 是一个用于构建全栈 Web 应用程序的 React 框架。 您可以使用 React 组件构建用户界面,并使用 Next.js 提供额外的功能和优化

在底层,Next.js 还抽象并自动配置了用于 React 的工具,如打包、编译等。 这使您能够专注于构建应用程序,而不是花费时间在配置上。

无论您是个体开发者还是大型团队的一部分,Next.js 都可以帮助您构建交互式动态且快速的 React 应用程序。

主要特点

一些主要的 Next.js 特点包括:

特点描述
路由基于文件系统的路由器
构建在 Server Components 之上,
支持布局、嵌套路由、加载状态、错误处理等。
渲染客户端和服务器端渲染
使用 Client 和 Server Components。
在服务器上通过 Next.js 进行静态和动态渲染进行进一步优化。
在 Edge 和 Node.js 运行时进行流式传输。
数据获取在Server Components中
使用async/await进行简化的数据获取

以及用于请求记忆、数据缓存和重新验证的扩展 fetch API。
样式支持您首选的样式方法
包括 CSS 模块、Tailwind CSS 和 CSS-in-JS。
优化图像、字体和脚本优化
以提高应用程序的核心 Web Vitals 和用户体验。
TypeScript对 TypeScript 的改进支持
具有更好的类型检查和更高效的编译,
以及自定义 TypeScript 插件和类型检查器。

如何使用这些文档

在屏幕左侧,您会找到文档导航栏。文档的页面按顺序组织,从基础到高级,因此您可以在构建应用程序时按步骤进行学习。 但是,您也可以按任何顺序阅读它们,或者跳转到适用于您用例的页面。

在屏幕右侧,您会看到一个目录,使在页面的各个部分之间导航更容易。

要开始,请查阅安装指南

App Router 与 Pages Router Next.js 有两个不同的路由器App RouterPages RouterApp Router 是一个较新的路由器,允许您使用 React 的最新功能,如 Server Components 和 Streaming。 Pages Router 是最初的 Next.js 路由器,允许您构建服务器渲染的 React 应用程序,并继续支持用于旧版 Next.js 应用程序。

在侧边栏的顶部,您会注意到一个下拉菜单(如下图),允许您在 App RouterPages Router 特性之间切换。 由于每个目录都有独特的功能,因此跟踪选择的选项卡是重要的。

App Router与Page Router

页面顶部的面包屑导航还将指示您当前是查看 App Router 文档还是 Pages Router 文档。

预备知识

虽然我们的文档旨在对初学者友好,但我们需要建立一个基线,以便文档能够集中在 Next.js 的功能上。 每当引入新概念时,我们将确保提供相关文档的链接。

要充分利用我们的文档,建议您具备基本的 HTML、CSS 和 React 知识。 如果需要复习 React 技能,请查看我们的React 基础课程, 它将为您介绍基础知识。 然后,通过构建一个仪表板应用程序来深入了解 Next.js。