页面路由 (Pages Router)

全新应用路由课程：您当前正在查看的是页面路由课程。点击此处查看新的应用路由课程。

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

• 需要使用 webpack 等打包工具对代码进行打包，并通过 Babel 等编译器进行转换
• 需要实施生产环境优化措施，如代码分割 (code splitting)
• 可能需要对部分页面进行静态预渲染 (pre-render) 以提升性能和 SEO，同时可能还需要使用服务端渲染 (SSR) 或客户端渲染 (CSR)
• 可能需要编写一些服务端代码来将 React 应用连接到数据存储

框架可以解决这些问题。但这样的框架必须具备适当的抽象级别——否则它将不太实用。同时还需要具备出色的"开发者体验"，确保您和团队在编写代码时获得卓越体验。

Next.js：React 框架

Next.js 应运而生——这个 React 框架能解决上述所有问题。更重要的是，它能让您和团队在构建 React 应用时获得成功保障。

Next.js 致力于提供一流的开发者体验和众多内置功能，包括：

• 直观的基于页面的路由系统（支持动态路由）
• 预渲染支持，每个页面均可选择静态生成 (SSG) 或服务端渲染 (SSR)
• 自动代码分割以加速页面加载
• 具备优化预取功能的客户端路由
• 内置 CSS 和 Sass 支持，兼容所有 CSS-in-JS 方案
• 开发环境支持快速刷新
• 通过API 路由使用 Serverless Functions 构建 API 端点
• 完全可扩展

Next.js 已被数以万计的面向生产环境的网站和 Web 应用采用，其中包括许多世界知名品牌。

关于本教程

这个免费的互动课程将引导您快速入门 Next.js。

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

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

本教程假设您已掌握 JavaScript 和 React 基础知识。如果您从未编写过 React 代码，建议先学习官方 React 教程。

如果您需要查阅文档，请访问 Next.js 文档。

加入讨论

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

让我们开始吧！