Back返回博客

Next.js 6 与 Nextjs.org

Next.js 6 带来零配置静态导出、App 组件、Babel 7 等新特性

今年 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，包含：

静态 React 应用

Next.js 的核心思想是通过预渲染实现高性能。预渲染有两种形式：

  • 服务端渲染 (SSR)：每个请求都会触发渲染。因此终端用户无需等待下载 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 by Xavier Cazalot (源码)

在这个示例中，每个页面都可以独立访问、预渲染和懒加载。但在客户端过渡时，可以实现流畅的动画效果。

更好的 Apollo 和 Redux 集成

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

通过 _app.js，现在集成变得更加简单。以下是几个示例：

更好的错误处理

React 提供了名为 componentDidCatch 的组件方法，可以捕获和处理从嵌套组件冒泡到客户端的异常。

在许多情况下，由于这些异常的不可预测性，您可能希望在顶层统一处理它们。

因此 _app.js 是定义 componentDidCatch 逻辑的理想位置。这里有一个错误边界处理的实际示例 (源码)

Babel 7

我们已将 Babel 升级到最新版本 7，带来了一些出色的新特性和改进。

JSX Fragments

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

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

这种写法可能很繁琐。在 Next.js 6 中，您可以使用新的 JSX fragment 语法简化创建过程：

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

嵌套 .babelrc

如果 Next.js 应用中某个嵌套目录需要不同的 Babel 配置，现在可以在该目录中包含一个作用域限定的 .babelrc 文件：

src/
  .babelrc      # 通用 .babelrc
  components/
    i18n/
      .babelrc  # 此 .babelrc 仅适用于本目录

一流的 TypeScript 支持

当我们宣布通用 webpack 时，提到可以通过 ts-loader 使用 TypeScript，因为我们现在同时在服务端和客户端运行 webpack。

Babel 7 内置支持 TypeScript（之前 Babel 仅支持 Flow）。要使用它，只需安装最新版本的 @zeit/next-typescript 或查看此示例。

Nextjs.org

我们很高兴推出由 Next.js 核心贡献者 Jimmy Moon 构建的新网站 nextjs.org。

首先，我们展示了一段加速视频，演示如何在 5 分钟内从零开始创建具有服务端渲染功能的 PWA：

nextjs.org 的开场视频

一站式文档中心

当您需要快速查阅内容时，只需访问 nextjs.org/docs：

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

循序渐进的学习

过去，我们会推荐初学者访问 https://learnnextjs.com 获取包含测验的 Next.js 入门分步指南。

现在我们已将其直接整合到 nextjs.org/learn，让学习入门更加便捷：

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

获取灵感

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

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