跳到主要内容
返回博客

2020 年 1 月 9 日,星期四

全新 Next.js 文档

发布者

我们很高兴地宣布推出全新的 Next.js 文档,其特点包括

  • 内容改进:新增了解释核心概念和功能的部分。
  • 搜索:使用新的侧边栏在文档中进行模糊搜索。
  • API 参考 最受期待的文档新增内容之一。 Next.js 文档现在有单独的 API 参考。
  • Next.js GitHub 仓库的一部分:文档内容仍然位于 Next.js 仓库中。确保文档更新与新功能同步。

除了全新和改进的文档外,我们还对 nextjs.org/learn 进行了一些更改,使其更容易开始使用 Next.js

  • 不再需要登录:我们取消了使用 GitHub 登录,因此您可以立即开始学习。您仍然可以赚取积分!
  • 新的 API 路由课程:新课程介绍了使用 Next.js 创建 API 端点的基础知识,以及如何使用 SWR 获取数据。

内容改进

以前,Next.js 文档都放在一个 readme.md 文档中。在过去的 3 年里,文档不断改进,规模不断扩大,涵盖了框架的所有领域。

随着时间的推移,文档页面变得相当长,我们开始收到社区的反馈,认为最好将文档拆分成更小的块,以便可以独立阅读和搜索。

与我们所有的版本一样,我们与社区成员密切合作,以找到最佳的页面结构。

我们决定采用多页结构,每个部分解释一个单独的概念。让用户可以更快地找到相关内容。

侧边栏也进行了更新,以更好地对内容进行排序,重点关注核心功能和概念,而不是显示所有内容并将高级功能与基本功能结合在一起。

除了改进结构外,文档还增加了一些新的部分。最值得注意的是

Getting Started documentation page
入门文档页面

迁移到多页文档后,您会失去单页文档的一个重要优势,即能够使用 cmd + f (或 Windows/Linux 上的 ctrl + f )进行搜索。

我们在文档侧边栏中添加了一个新的搜索输入框,允许您在所有文档页面中进行模糊搜索。

此新增功能使文档仍然感觉像单个页面。

Search for TypeScript in the documentation.
在文档中搜索 TypeScript。

API 参考

侧边栏现在有一个专门的 API 参考部分。文档的这一新增功能是经常使用 Next.js 的公司和社区成员经常要求的,他们只是想查找要传递的参数或要调用的函数。

以前,这些参考资料与功能的解释交织在一起。

Documentation in the API Reference
API 参考中的文档

Next.js GitHub 仓库的一部分

自项目开始以来,Next.js 文档的唯一位置一直是 GitHub 仓库中的 readme.md

nextjs.org 网站启动时,我们会手动保持文档更改的最新状态,方法是定期将内容从 Next.js GitHub 仓库复制到网站 GitHub 仓库。我们必须这样做是因为网站上的页面由 MDX 提供支持。

手动复制并不理想,我们开始研究解决此问题的更好方案。我们希望新的文档贡献方式与当前方式一样低摩擦,即在 Next.js GitHub 仓库中更新 markdown 文件,而无需了解网站的工作原理。

通过使用 Next.js 新的按页面静态生成支持(提案),我们能够将文档保留在 Next.js 仓库中。

来自 GitHub 原始文件 URL 的 markdown 在 getStaticProps 中被获取并渲染为 HTML。由于不再需要 MDX,因此发送到浏览器的 JavaScript 更少。

我们还希望使贡献单个文档页面更容易。为了实现这一目标,我们在每个文档页面的底部添加了一个“在 GitHub 上编辑此页面”的链接。

Documentation page with link to the markdown file on GitHub.
带有指向 GitHub 上 markdown 文件的链接的文档页面。

当对文档进行更新时,它将随每个新的稳定版本自动发布。保持文档始终与新版本同步更新。

nextjs.org/learn 改进

nextjs.org/learn 网站是一种交互式学习体验,它引导您了解 Next.js 默认提供的许多功能。

每完成一节课,您都会获得积分奖励。有时,课程甚至会有一个测验来巩固您对课程的知识。

为了跟踪此进度和您收集的积分,我们之前要求用户使用其 GitHub 帐户登录。

最近,我们取消了此限制,现在所有课程都可以在不登录的情况下使用。让您可以在 nextjs.org/learn 上立即开始学习 Next.js。

新的 API 路由课程

添加了一个新课程,解释了使用 Next.js 创建 API 端点的基础知识,以及如何使用 SWR 获取数据。

API Routes lesson in nextjs.org/learn.
nextjs.org/learn 中的 API 路由课程。

特别感谢 Next.js 社区成员 Amandeep Singh 贡献了这门新课程。

未来

我们将根据用户反馈不断改进和迭代文档。您可以期待关于 Next.js 帮助您的各种高低级概念的新章节。

如果您对新文档有任何反馈,可以使用 nextjs.org/docs 上每个页面底部的反馈输入框

我们欢迎社区对文档的任何贡献。一个好的开始之处是 GitHub 上的 “Good first issue label”