新的 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上向我们的社区提问。

让我们开始吧！