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 现在生成 减少 5.58KB 的客户端 JavaScript,并且 HTTP 有效负载比以前的版本更小。
withRouter 不再依赖于 hoist-non-react-statics,从而将捆绑包大小减少了 3KB。withRouter 仍将提升 getInitialProps,但不会提升其他静态属性。
next/babel 预设已经过优化,可生成更精简、更快速的 JavaScript。
X-Powered-By 头已被移除,从而减少了 HTTP 有效负载大小。我们对社区进行了调查,发现该头在生产环境中通常被禁用,因此我们决定将其移除。这也意味着,如果您的项目中启用了 poweredByHeader 选项,则可以将其从 next.config.js 中移除。
我们对 Next.js 的依赖树和整体代码库进行了大量优化,因此我们能够将每个无服务器函数的大小 减少 44KB(gzip 后减少 5.44KB)。
无服务器函数的大小直接影响无服务器启动性能,更小的函数意味着更快的启动。
| 8.0 | 8.0.4 | 变化 | |
|---|---|---|---|
| 无服务器页面大小 | 259 KB | 215 KB | 小 17% |
| 无服务器页面大小 (gzip) | 62.3 KB | 56.8 KB | 小 9% |
Next.js 8 发布后,我们收到少量用户报告称,在 Next.js 之外导入 React 组件(例如在测试套件中)时遇到问题。这是由于 next 的导入被重写为 Next.js 代码库中的正确文件造成的,但是,此优化适用于所有 next/babel 预设的用户。此优化已移至 Next.js 构建过程本身,因此它将不再与用户的 Babel 设置冲突。
默认视口 Meta 标签
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 来覆盖
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 学习 现在更新了示例,并在每个部分提供了更多详细信息,使说明更容易理解!

贡献
我们很高兴看到 Next.js 的采用持续增长。
- 我们拥有超过 660 名贡献者。
- 在 GitHub 上,该项目已被标星超过 36,150 次。
- 自首次发布以来,已提交超过 2,950 个拉取请求。
我们衷心感谢所有为本次 Next.js 发布做出贡献的人。无论是贡献核心代码,还是扩展和改进我们不断增长的示例目录,我们都感谢所有的贡献。
如果您希望开始为 Next.js 做出贡献,带有 good first issue 或 help wanted 标签的问题是很好的起点。
社区
Next.js 社区已发展到超过 6,000 名成员。
GitHub discussions 是一个您可以讨论 Next.js、获取解决问题的建议以及利用您对 Next.js 的知识帮助其他社区成员的地方。