创建 Next.js 应用程序

要从头开始使用 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 路由可使用 Serverless Functions 构建 API 端点
  • 完全可扩展

Next.js 被用于数以万计的的网站和 Web 应用程序,包括许多世界上许多最大的品牌都在使用 Next.js。

关于本教程

这个免费的交互式课程将指导您完成 Next.js 入门的学习。

在本教程中,您将通过创建一个非常简单的博客应用程序来学习 Next.js 的基础只是。这是最终成果的示例:

https://next-learn-starter.now.sh (source)

让我们开始吧!

本教程假定您具有 JavaScript 和 React 的基础知识。如果您从未编写过 React 代码,则应首先阅读 官方的 React 教程

如果你想看的是 Next.js 文档,请 点击此处