Next.js 6 和 Nextjs.org | Next.js 框架

今年，ZEIT Day 的主题演讲以突出我们的开源项目开始，包括展示 Next.js 的指标。在 GitHub 上拥有超过 25000 个 star，并且已经有超过 10000 个网站由其驱动，我们对其增长感到非常惊讶，并且很高兴看到越来越多的项目依赖于它。

今天，我们很自豪地推出生产就绪的 Next.js 6，其特点包括

零配置静态导出。默认情况下，无需 next.config.js
_app.js，一个扩展点，可以实现页面过渡、错误边界等功能
Babel 7 和 Fragment 语法 <> 支持
扩展的集成测试套件，并强烈关注安全性
核心代码库中的 Flow 注释

除了 6.0 版本发布之外，我们还将 Next.js 放在其专属主页 nextjs.org 上，其特点包括

所有 Next.js 文档集中在一个地方。不再需要在 GitHub 上查找 README 文件
将 https://learnnextjs.com 合并到 https://nextjs.net.cn/learn
展示用 Next.js 构建的最令人印象深刻的网站

静态 React 应用程序

Next.js 专注于预渲染的概念，以此来实现高性能。预渲染有两种形式

服务器渲染：每次请求都会触发渲染。因此，最终用户无需等待下载任何 JS 即可开始消费数据
静态渲染：我们输出静态文件，这些文件可以直接提供服务，而无需在服务器上执行任何代码

到目前为止，Next.js 中的静态导出功能非常强大，但不够易用。即使没有使用自定义路由，也需要设置手动路由映射。

在 Next.js 6 中，我们会根据您的 pages/ 目录的内容自动为您生成路由映射。如果您没有使用高级自定义路由，则无需对 next.config.js 进行任何修改。只需运行

next build
next export

例如，查看这个网站静态部署到 Vercel。该网站的源代码也可用。

App 组件

Next.js 提供了一个名为 _document.js 的可扩展点。如果定义了，它允许您覆盖应用程序的最顶层文档，该文档渲染 <html> 元素。

_document.js 允许强大的可扩展性，但它有一些严重的限制。例如，React 无法在客户端直接渲染 <html> 或 <body>，因此 _document.js 主要限于初始预渲染阶段。

为了实现其他一些强大的用例，我们引入了 _app.js，它是包裹每个页面外部的顶层组件。

_document.js 和 _app.js 之间的一些区别

让我们看一下定义 _app.js 启用的一些用例。

页面过渡

页面过渡示例：page-transitions-app-next.vercel.app，作者 Xavier Cazalot (源代码)

在这个例子中，每个页面都可以独立访问、预渲染和延迟加载。但是，当我们在客户端进行过渡时，可以实现平滑的动画效果。

更好的 Apollo 和 Redux 集成

我们已经有很多集成数据和状态管理框架（如 Apollo 和 Redux）的示例。

然而，有了 _app.js，现在包含这些框架变得更加简单。以下是一些示例

Apollo (源代码)
Redux (源代码)

更好的错误处理

React 提供了一个名为 componentDidCatch 的组件方法，使您能够捕获和处理从客户端嵌套组件中冒出的异常。

在许多情况下，由于这些异常的意外性质，您可能希望在顶层平等地处理所有这些异常。

因此，_app.js 是定义 componentDidCatch 逻辑的好地方。这是一个错误处理边界实际应用的示例 (源代码为 source code)

Babel 7

我们已将 Babel 升级到最新版本：7。它带来了一些很棒的新功能和改进。

JSX Fragments

React 16.2 引入了 Fragment API，它允许您表达元素列表，而无需将它们包装在任意 HTML 元素（如 <div>）中

render() {
  return <React.Fragment>
    <A />,
    <B />
  </React.Fragment>
}

编写这个可能很繁琐，使用 Next.js 6，您可以使用新的 JSX fragment 语法来方便地创建 fragments

render() {
  return <>
    <A />,
    <B />
  </>
}

嵌套的 .babelrc

如果您的 Next.js 应用程序中有一个嵌套目录需要不同的 Babel 配置，现在可以在该目录中专门包含一个作用域为该目录的 .babelrc 文件

src/
  .babelrc      # General .babelrc
  components/
    i18n/
      .babelrc  # This .babelrc only applies to this directory

一流的 TypeScript 支持

当我们宣布 Universal webpack 时，我们指出可以通过 ts-loader 使用 TypeScript，因为我们现在在服务器和客户端上都运行 webpack。

Babel 7 具有对 TypeScript 的内置支持（以前 Babel 仅支持 Flow）。

要使用它，只需安装最新版本的 @zeit/next-typescript 或查看此示例。

Nextjs.org

我们非常高兴地介绍新的 nextjs.org，它由 Next.js 核心贡献者 Jimmy Moon 构建。

首先，我们重点介绍一个加速视频，该视频向您展示如何在 5 分钟内从头开始使用服务器渲染创建 PWA

nextjs.org 的开场视频

我们文档的集中地

当您需要快速查找某些内容时，只需访问 nextjs.org/docs

文档将始终反映最新的稳定版本

循序渐进地学习

以前，我们建议初学者访问 https://learnnextjs.com 以获取关于如何开始使用 Next.js 的分步指南（带有测验！）。

现在我们已将其直接集成到 nextjs.org/learn 中，使开始学习变得更加容易

开始学习 Next.js 的最简单方法

获得启发

我们现在展示一些基于 Next.js 构建的精美网站和应用程序的案例。访问 nextjs.org/showcase 获取灵感，或提交您自己的案例！

使用 Next.js 构建的项目案例展示