Next.js 5.1：更快的页面解析、环境配置及更多

我们很高兴推出 Next.js 5.1，它支持环境配置、阶段、源映射和新的 Next.js 插件。

此次版本带来了重大的性能改进：页面解析速度提升了 **102 倍**，并且错误页面加载效率更高。

要升级或安装，请运行

npm i next@latest react@latest react-dom@latest

除了升级 Next.js，我们还升级了对等依赖项 react 和 react-dom

务必同时升级 next-plugins，例如 @zeit/next-css、@zeit/next-sass、@zeit/next-less 或 @zeit/next-typescript。

更快的页面解析

得益于 Next.js 5.0 中的架构变更，我们得以简化根据 URL 路径解析页面的逻辑。这些更改是基于 @oliviertassinari 的研究。此前，解析一个页面平均需要 **2.347 毫秒**。采用新逻辑后，解析同一个页面平均只需 **0.023 毫秒**。这意味着 Next.js 应用中最常调用的方法之一获得了 **102 倍**的速度提升。

环境配置

典型的 Node.js 环境通常依赖于向应用程序传递环境变量，例如：API_URL=https://api.vercel.com node index.js，然后您可以在应用程序中的任何地方使用 process.env.API_URL。

对于通用渲染，process.env 在客户端不可用。因此，Next 5.1 引入了一项新功能：publicRuntimeConfig 和 serverRuntimeConfig。这些可以在 next.config.js 中设置，然后通过 next/config 模块使用。

module.exports = {
  serverRuntimeConfig: {
    // Will only be available on the server side
    mySecret: 'secret',
  },
  publicRuntimeConfig: {
    // Will be available on both server and client
    staticFolder: '/static',
  },
};

serverRuntimeConfig 和 publicRuntimeConfig 都定义在 next.config.js 中

import getConfig from 'next/config';
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
 
console.log(serverRuntimeConfig.mySecret); // Will only be available on the server side
console.log(publicRuntimeConfig.staticFolder); // Will be available on both server and client
 
export default function Index() {
  return (
    <div>
      <img src={`${publicRuntimeConfig.staticFolder}/logo.png`} />
    </div>
  );
}

next/config 模块的 getConfig 方法用于获取配置值

改进的错误处理

此前，Next.js 有一个特殊的错误处理机制，用于在加载页面包时检测服务器错误。页面包是客户端加载页面时加载的 JavaScript 文件，例如 /_next/-/page/index.js。

如果存在错误，例如构建 ID 不匹配，页面包仍将以 200 HTTP 状态提供，但内容将是 Next.js 服务器生成的 JSON 格式的错误表示。这样做的原因是存在客户端错误处理，它不仅仅依赖于页面是 404。此解决方案运行良好，直到您尝试将资产上传到不支持回退的静态文件主机或 CDN。

在 Next.js 5.1 中，我们完全重构了错误处理逻辑，当页面包返回 404 HTTP 状态时，路由器会自动检测并重新加载页面，以确保在多区域之间进行导航是可能的。

在重写此逻辑时，我们移除了 Router.onAppUpdated 钩子；它主要用于触发页面重新加载。现在页面将自动重新加载

除此之外，我们还添加了一组新的集成测试，用于开发模式下的错误恢复，以避免未来版本中错误恢复的回归。

阶段 / 配置函数

一些 next-plugins，例如 @zeit/next-css，只在 Next.js 处于开发模式或运行 next build 时才需要。

现在你可以导出一个返回配置对象的函数，而不是直接导出对象。

module.exports = (phase, { defaultConfig }) => config;

next.config.js 导出一个返回用户配置的函数

导出一个函数将允许你访问 Next.js 正在运行的 phase，例如开发、生产、构建、导出。这允许插件只在需要时加载，同时也提供了对默认配置的访问。

我们引入了一个名为 next/constants 的新模块，它包含了常用常量，包括阶段。

const {PHASE_DEVELOPMENT_SERVER} = require('next/constants')
module.exports = (phase, {defaultConfig}){
  if(phase === PHASE_DEVELOPMENT_SERVER) {
    return { /* development only config options here */ }
  }
 
  return { /* config options for all phases except development here */ }
}

一个检查开发阶段的 next.config.js

改进的生产环境 Source Map 生成

随着 Next.js 5 中引入通用 webpack，为生产环境添加源映射变得像在 next.config.js 中添加几行代码一样简单

module.exports = {
  webpack(config, { dev }) {
    if (!dev) {
      config.devtool = 'source-map';
      for (const plugin of config.plugins) {
        if (plugin['constructor']['name'] === 'UglifyJsPlugin') {
          plugin.options.sourceMap = true;
          break;
        }
      }
    }
    return config;
  },
};

在 next.config.js 中手动启用源映射

@zeit/next-source-maps 可以添加到项目中，为您自动启用生产源映射，将以下内容添加到 next.config.js

const withSourceMaps = require('@zeit/next-source-maps');
module.exports = withSourceMaps();

使用 @zeit/next-source-maps 在 next.config.js 中启用源映射

这启用了除 app.js 之外所有文件的源映射输出，原因是 app.js 由多个文件（manifest.js 和 commons.js）通过 webpack 插件组合而成。其副作用是 webpack 无法为组合后的文件生成源映射。

多亏了来自 @ptomasroos 的 pull request，app.js 文件被替换为 main.js。此文件将包含之前编译到 manifest.js 和 commons.js 的代码，并且 webpack 将为 main.js 生成一个源映射。源映射将自动提供，允许外部错误跟踪工具在检测到错误时显示实际的文件和行号。

新插件/现有插件的改进

我们推出了两款新的官方插件。@zeit/next-bundle-analyzer 允许轻松设置 webpack-bundle-analyzer，分别分析服务器端和客户端 Bundle。

此外，官方的 css、less 和 sass 插件在热重载和打包方面也进行了大量改进。例如，在开发模式下不再出现未样式化内容的闪烁。子组件中的样式也能被正确识别。

社区

您现在可以在 GitHub 上找到 Next.js 社区。最近，那里发布了一份 使用 Next.js 的知名公司列表。欢迎在帖子中发布您的项目。

谢谢

我们要感谢所有为本次 Next.js 发布做出贡献的人。无论是贡献核心代码，还是扩展和改进我们不断增长的示例目录。

如果您希望开始为 Next.js 贡献力量，可以在带有 good first issue 或 help wanted 标签的 issue。

特别感谢 Trulia 公司对环境配置和新的错误页面处理提供的宝贵反馈。