新版 App Router 课程：您当前正在查看 Pages Router 课程。在此处查看新版 App Router 课程。

要从零开始构建一个完整的 React Web 应用程序，您需要考虑许多重要细节

• 代码必须使用 webpack 等打包工具进行打包，并使用 Babel 等编译器进行转换。
• 您需要进行代码拆分等生产优化。
• 您可能希望静态预渲染某些页面以提高性能和 SEO。您可能还希望使用服务器端渲染或客户端渲染。
• 您可能需要编写一些服务器端代码，将您的 React 应用程序连接到您的数据存储。

一个框架可以解决这些问题。但这样的框架必须具有适当的抽象级别——否则它将不会非常有用。它还需要拥有出色的“开发者体验”，确保您和您的团队在编写代码时拥有出色的体验。

Next.js：React 框架

介绍 Next.js，React 框架。Next.js 提供了解决上述所有问题的方案。更重要的是，它让您和您的团队在构建 React 应用程序时轻松取得成功。

Next.js 旨在提供一流的开发人员体验和许多内置功能，例如

• 直观的基于页面的路由系统（支持动态路由）
• 支持预渲染，包括静态生成（SSG）和服务器端渲染（SSR），支持按页面进行
• 自动代码拆分，加快页面加载速度
• 具有优化预取功能的客户端路由
• 内置 CSS 和 Sass 支持，以及对任何 CSS-in-JS 库的支持
• 支持快速刷新的开发环境
• API 路由，用于使用无服务器函数构建 API 端点
• 完全可扩展

Next.js 已被用于成千上万的面向生产的网站和 Web 应用程序，其中包括许多世界最大品牌。

关于本教程

这个免费的交互式课程将指导您如何开始使用 Next.js。

在本教程中，您将通过创建一个非常简单的博客应用程序来学习 Next.js 的基础知识。以下是最终结果的示例

https://next-learn-starter.vercel.app (源代码)

本教程假设您已具备 JavaScript 和 React 的基本知识。如果您从未编写过 React 代码，您应该先学习官方 React 教程。

如果您正在寻找文档，请访问 Next.js 文档。

加入讨论

如果您对 Next.js 或本课程有任何疑问，欢迎在 Discord 上向我们的社区提问。

让我们开始吧！