Back返回博客

Next.js 8.0.4 版本发布

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（gzip 后 5.44KB）。

无服务函数大小直接影响无服务启动性能，更小的函数意味着更快的启动。

8.08.0.4差异
无服务页面大小259 KB215 KB17% 减小
无服务页面大小 (gzip)62.3 KB56.8 KB9% 减小

在 Next.js 8 发布后，我们收到少量用户报告在 Next.js 之外导入 React 组件时遇到问题（例如测试套件中）。这是由于 next 的导入被重写到了 Next.js 代码库中的正确文件，但该优化被应用到了所有使用 next/babel 预设的用户。现在该优化已移至 Next.js 构建流程内部，不再与用户的 babel 配置冲突。

默认 Viewport Meta 标签

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

默认情况下，浏览器处理 CSS @media 查询和缩放的方式与预期不符，这可能导致编写 CSS @media 查询时出现意外的不一致。

几乎所有情况下，Next.js 用户都会添加 viewport meta 标签来解决这些不一致问题。

从 8.0.4 版本开始，大多数情况下不再需要手动添加 viewport 标签。如果应用未设置 viewport，将自动应用默认配置：

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

仍然可以通过 next/head 覆盖默认 viewport 标签：

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 Learn 是一个包含测验和示例的 Next.js 分步学习指南。

该网站最近使用 MDX 重建，使得贡献比以往更容易。我们欢迎任何人贡献到 学习网站！

网站还升级使用了 Next.js 无服务目标，该功能在 Next.js 8 中引入，确保网站在全球范围内都能快速扩展并为用户提供良好体验。

我们收到了大量关于内容改进的社区反馈，过去几周一直在根据反馈进行改进。Next.js Learn 现在更新了示例，并在每个部分增加了更多细节，使说明更易于理解！

Next.js 学习网站

Next.js 学习网站

贡献

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

  • 我们已有超过 660 位贡献者
  • 在 GitHub 上，项目获得了超过 36,150 次星标
  • 自首次发布以来，已提交超过 2,950 个拉取请求

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

如果您想开始为 Next.js 做贡献，带有 good first issue 或 help wanted 标签的 issue 是不错的起点。

社区

Next.js 社区已增长至超过 6,000 名成员。

GitHub discussions 是一个您可以讨论 Next.js、获取问题解决建议，并用您的 Next.js 知识帮助其他社区成员的地方。

立即加入 GitHub 上的社区！