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

今年，ZEIT Day 主题演讲从重点介绍我们的开源项目开始，包括展示 Next.js 的指标。在 GitHub 上拥有超过 25000 个星标，并且已经有超过 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。网站的源代码也可用。

应用组件

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 by Xavier Cazalot (源代码)

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

更好的 Apollo 和 Redux 集成

我们已经有了许多示例来集成数据和状态管理框架，如 Apollo 和 Redux。

但是，使用 _app.js，现在包含这些框架变得更加简单。以下是一些示例

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

更好的错误处理

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

在许多情况下，由于这些异常的意外性质，您可能希望在顶层以相同的方式处理所有异常。

因此，_app.js 是定义 componentDidCatch 逻辑的好地方。这是一个示例，展示了错误处理边界的工作原理 (源代码)

Babel 7

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

JSX 片段

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

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

编写这些代码可能很繁琐，使用 Next.js 6，您可以使用新的 JSX 片段语法来方便地创建片段。

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

嵌套 .babelrc

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

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

一流的 TypeScript 支持

当我们宣布通用 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 构建的项目的展示。