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.347ms**。使用新的逻辑，解析同一页面平均需要 **0.023ms**。对于 Next.js 应用程序中最常调用的方法之一，这提高了 **102 倍**的速度。

环境配置

典型的 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 模块访问。

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，向生产环境添加 Source Map 变得像在 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 将自动提供服务，允许外部错误跟踪工具在检测到错误时显示实际的文件和行号。

新的插件/对现有插件的改进

我们引入了两个新的官方插件。 @zeit/next-bundle-analyzer 允许轻松设置 webpack-bundle-analyzer 以分别分析服务器端和客户端捆绑包。

此外，官方的 css、less 和 sass 插件在热重载和打包方面进行了许多改进。例如，开发模式下不再出现未样式内容的闪烁。子组件中的样式也会被提取。

社区

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

感谢

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

如果您想开始为 Next.js 做出贡献，您可以找到带有 适合新手 Issue 或 需要帮助 Issue 标签的 Issue。

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