跳至内容
返回博客

2019年4月2日,星期二

Next.js 8.0.4

发布者

我们很高兴推出可用于生产环境的 Next.js 8.0.4

与往常一样,我们努力确保所有这些优势都**完全向后兼容**。对于大多数 Next.js 应用程序,您只需运行

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

构建性能

Next.js 构建现在更具确定性,这意味着如果代码没有更改,构建输出每次都会保持相同的结果。

这使得构建过程能够缓存更多工作,从而在第一次构建后更快地重新构建生产代码。

我们的测量结果表明,大量构建时间都花在了压缩 JavaScript 上,因为构建输出现在更具确定性,因此压缩后的文件已经存在于缓存中的可能性更大。

用户部署到 Vercel将自动体验这些缓存改进。

我们简化了服务器端 next/dynamic 清单,使其仅包含异步加载的模块。此简化的清单计算速度更快,并且生成的 JavaScript 更少。

CircleCI 用户应该会注意到构建时间更快。以前,由于 CircleCI 环境无法准确反映可用 CPU 的数量,因此工作线程被过度调度。Next.js 现在可以检测 CircleCI,并根据可用资源设置适当数量的 CPU。

更小的运行时占用空间

Next.js 现在生成的客户端 JavaScript **减少了 5.58KB**,并且 HTTP 负载比以前版本更小。

withRouter 不再依赖于 hoist-non-react-statics,从而将捆绑包大小减少了 **3KB**。withRouter 仍将提升 getInitialProps,但不会提升其他静态属性。

next/babel 预设已得到优化,可生成更精简和更快速的 JavaScript。

已删除 X-Powered-By 标头,从而减小了 HTTP 负载大小。我们调查了社区,发现该标头在生产环境中通常会被禁用,因此我们决定将其删除。这也意味着,如果您的项目中启用了该选项,则可以从您的 next.config.js 中删除 poweredByHeader

我们在 Next.js 依赖项树和整体代码库中进行了许多优化,在此过程中,我们能够使每个无服务器函数 **减小 44KB(5.44KB gzip)**。

无服务器函数的大小直接影响无服务器启动性能,函数越小,启动速度越快。

8.08.0.4增量
无服务器页面大小259 KB215 KB**17%** 更小
无服务器页面大小(gzip)62.3 KB56.8 KB**9%** 更小

在发布 Next.js 8 后,我们收到了一些用户的报告,他们遇到了在 Next.js 之外导入 React 组件的问题,例如在他们的测试套件中。这是由于导入到 next 的内容被重写为 Next.js 代码库中的正确文件导致的,但是,此优化适用于所有使用 next/babel 预设的用户。优化已移至 Next.js 构建过程本身,因此它将不再与用户的 babel 设置冲突。

默认视口元标签

Next.js 的目标之一是为编写 Web 应用程序提供最佳的默认设置。为了减少在 Next.js 中实现 CSS 媒体查询时需要进行的设置工作量。

默认情况下,浏览器不会以您期望的方式处理 CSS @media 查询和缩放,这可能导致在编写 CSS @media 查询时出现意外的不一致。

在几乎所有情况下,Next.js 用户都会在其应用程序中添加一个 viewport 元标签来解决这些不一致问题。

从 8.0.4 版本开始,在大多数情况下不再需要此 viewport 标签。如果应用程序未设置 viewport,则将应用默认视口

<meta
  name="viewport"
  content="width=device-width,minimum-scale=1,initial-scale=1"
/>

仍然可以通过使用 next/head 覆盖视口标签

pages/index.js
import Head from 'next/head';
 
function HomePage() {
  return (
    <>
      <Head>
        <meta
          name="viewport"
          content="width=device-width,minimum-scale=0.5,initial-scale=1"
        />
      </Head>
    </>
  );
}
 
export default HomePage;

感谢 Jason Miller 合作并实施此更改。

新的 @next/mdx 插件

MDX 允许你在 Markdown 文档中编写 JSX。你可以使用常规的 Markdown 语法编写内容,并导入 React 组件来使用交互式和动态内容增强文档。

为 Next.js 提供 MDX 支持的插件 @zeit/next-mdx 已经迁移到 Next.js GitHub 仓库,现在可作为 @next/mdx 使用。

安装

终端
npm i @next/mdx @mdx-js/loader

要使其在你的 Next.js 应用中可用,请创建一个 next.config.js 文件并包含

const withMDX = require('@next/mdx')();
module.exports = withMDX();

随着时间的推移,更多 Next.js 插件将被迁移到 Next.js 仓库中,以便它们与 Next.js 核心一起发布,并由 Next.js 测试套件进行测试。这样,我们可以确保热模块替换、生产构建和其他功能与插件一起良好运行。

学习指南改进

Next.js 学习 是一个逐步学习 Next.js 的指南,包含测验和示例。

该网站最近使用 MDX 进行了重建,这使得贡献比以往任何时候都更容易。我们欢迎任何人为 学习网站 做出贡献!

该网站也已升级为使用 Next.js 无服务器目标,该目标在 Next.js 8 中引入,确保网站扩展并对全球用户快速响应。

我们收到了社区关于内容改进的大量反馈,并在过去几周里一直在采取行动。Next.js 学习 现在拥有更新的示例和每个部分的更多详细信息,使说明更容易理解!

The Next.js Learn Website
Next.js 学习网站

贡献

我们非常高兴地看到 Next.js 采用率的持续增长。

  • 我们拥有超过 **660 位贡献者。**
  • 在 GitHub 上,该项目已被加星超过 **36,150 次**。
  • 自首次发布以来,已提交超过 **2,950 个拉取请求**。

我们要感谢所有为本次 Next.js 版本做出贡献的人。无论是在核心方面做出贡献,还是扩展和改进我们不断增长的 示例目录,我们都感谢所有贡献。

如果你想开始为 Next.js 做出贡献,带有 适合新手的问题需要帮助 标签的问题是一个好的开始。

社区

Next.js 社区已发展到超过 **6,000 名成员**。

GitHub 讨论区是一个你可以讨论 Next.js、获取解决问题的建议以及利用你对 Next.js 的了解帮助其他社区成员的地方。

加入 GitHub 社区!