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 中的任何位置使用 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 有一种特殊的错误处理机制，用于检测加载页面 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

改进的生产源地图生成

随着 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 的拉取请求，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 标签中找到相关问题。

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