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

我们很高兴推出 Next.js 5.1，它增加了对环境配置、阶段、Source Map 和新的 Next.js 插件的支持。

引入了主要的性能改进：页面解析速度提升了 102 倍，并且错误页面加载效率更高。

要升级或安装，请运行

终端

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

除了升级 Next.js 之外，我们还升级了 peer 依赖项 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 倍。

Page resolution shown per request. Left is Next.js 5.0, right is Next.js 5.1 — 页面解析速度显示为每次请求。左侧是 Next.js 5.0，右侧是 Next.js 5.1

环境配置

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

使用通用渲染时，客户端无法使用 process.env。因此，在 Next 5.1 中，我们引入了一个新功能：publicRuntimeConfig 和 serverRuntimeConfig。这些可以在 next.config.js 中设置，然后可以使用 next/config 模块来访问。

next.config.js

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 中定义

pages/index.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 有一种特殊的错误处理机制，用于检测加载页面 bundles 时的服务器错误。页面 bundle 是在客户端加载以加载页面的 javascript 文件，例如 /_next/-/page/index.js。

如果出现错误（例如 build ID 不匹配），页面 bundle 仍然会以 200 HTTP 状态提供，但内容将是由 Next.js 服务器生成的错误的 JSON 表示。这样做的原因是，客户端错误处理不仅仅依赖于页面是否为 404。此解决方案运行良好，直到您尝试将资源上传到不支持回退的静态文件托管或 CDN。

在 Next.js 5.1 中，当页面 bundle 返回 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 的引入，将 Source Map 添加到您的生产环境变得非常简单，只需在 next.config.js 中添加几行代码即可

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 中手动启用 Source Map

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

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

使用 @zeit/next-source-maps 在 next.config.js 中启用 Source Map

这启用了除一个文件 app.js 之外的所有文件的 Source Map 输出，原因是 app.js 由多个文件（manifest.js 和 commons.js）与 webpack 插件组合而成。这样做的副作用是 webpack 无法为组合文件生成 Source Map。

感谢来自 @ptomasroos 的 pull request，app.js 文件被 main.js 替换。此文件将保存先前编译为 manifest.js 和 commons.js 的代码，并且 webpack 将为 main.js 生成 Source Map。 Source Map 将自动提供，从而允许外部错误跟踪工具在检测到错误时显示实际的文件和行号。

The source code is shown in the sources panel — 源代码显示在 sources 面板中

特别感谢 Trulia 为我们提供了关于环境配置和新的错误页面处理的宝贵反馈。