跳到内容
构建你的应用程序升级版本 12

版本 12

要升级到版本 12，请运行以下命令

终端
npm i next@12 react@17 react-dom@17 eslint-config-next@12
终端
yarn add next@12 react@17 react-dom@17 eslint-config-next@12
终端
pnpm up next@12 react@17 react-dom@17 eslint-config-next@12
终端
bun add next@12 react@17 react-dom@17 eslint-config-next@12

须知： 如果您正在使用 TypeScript，请确保您也将 @types/react 和 @types/react-dom 升级到相应的版本。

升级到 12.2

中间件 - 如果您在 12.2 之前使用过中间件，请参阅升级指南以获取更多信息。

升级到 12.0

最低 Node.js 版本 - 最低 Node.js 版本已从 12.0.0 提升至 12.22.0，这是第一个原生支持 ES Modules 的 Node.js 版本。

最低 React 版本 - 最低要求的 React 版本是 17.0.2。要升级，您可以在终端中运行以下命令

终端
npm install react@latest react-dom@latest
 
yarn add react@latest react-dom@latest
 
pnpm update react@latest react-dom@latest
 
bun add react@latest react-dom@latest

SWC 替换 Babel

Next.js 现在使用基于 Rust 的编译器 SWC 来编译 JavaScript/TypeScript。这个新的编译器在编译单个文件时比 Babel 快 17 倍，快速刷新快 5 倍。

Next.js 提供与具有自定义 Babel 配置的应用程序的完全向后兼容性。Next.js 默认处理的所有转换，如 styled-jsx 和 getStaticProps / getStaticPaths / getServerSideProps 的 tree-shaking 都已移植到 Rust。

当应用程序具有自定义 Babel 配置时，Next.js 将自动选择不使用 SWC 编译 JavaScript/Typescript，并将回退到使用 Babel，就像在 Next.js 11 中使用的方式一样。

许多当前需要自定义 Babel 转换的外部库集成将在不久的将来移植到基于 Rust 的 SWC 转换。这些包括但不限于

  • Styled Components
  • Emotion
  • Relay

为了优先考虑可以帮助您采用 SWC 的转换，请在 此反馈线程上提供您的 .babelrc。

SWC 替换 Terser 进行代码压缩

您可以选择在 next.config.js 中使用一个标志，用 SWC 替换 Terser 来压缩 JavaScript，速度最多可提高 7 倍

next.config.js
module.exports = {
  swcMinify: true,
}

使用 SWC 进行代码压缩是一个可选标志，以确保在 Next.js 12.1 中成为默认设置之前，可以在更多真实的 Next.js 应用程序中进行测试。如果您对代码压缩有任何反馈，请在 此反馈线程上留下您的反馈。

改进 styled-jsx CSS 解析

除了基于 Rust 的编译器之外，我们还实现了一个新的 CSS 解析器，它基于 styled-jsx Babel 转换中使用的解析器。这个新的解析器改进了 CSS 的处理，并且现在在使用以前会悄悄通过并导致意外行为的无效 CSS 时会报错。

由于此更改，无效的 CSS 将在开发和 next build 期间抛出错误。此更改仅影响 styled-jsx 的使用。

next/image 更改了包装元素

next/image 现在在 <span> 而不是 <div> 中渲染 <img>。

如果您的应用程序具有特定的 CSS 定位 span，例如 .container span，则升级到 Next.js 12 可能会错误地匹配 <Image> 组件内部的包装元素。您可以通过将选择器限制为特定类（例如 .container span.item）并使用该 className 更新相关组件（例如 <span className="item" />）来避免这种情况。

如果您的应用程序具有特定的 CSS 定位 next/image <div> 标签，例如 .container div，则它可能不再匹配。您可以更新选择器 .container span，或者最好添加一个新的 <div className="wrapper"> 包裹 <Image> 组件，并改为定位它，例如 .container .wrapper。

className 属性保持不变，仍将传递给底层的 <img> 元素。

有关更多信息，请参阅文档。

HMR 连接现在使用 WebSocket

以前，Next.js 使用 服务器发送事件 连接来接收 HMR 事件。Next.js 12 现在使用 WebSocket 连接。

在某些情况下，当将请求代理到 Next.js 开发服务器时，您需要确保正确处理升级请求。例如，在 nginx 中，您需要添加以下配置

location /_next/webpack-hmr {
    proxy_pass https://127.0.0.1:3000/_next/webpack-hmr;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

如果您正在使用 Apache (2.x)，您可以添加以下配置以启用 WebSockets 到服务器。查看端口、主机名和服务器名称。

<VirtualHost *:443>
 # ServerName yourwebsite.local
 ServerName "${WEBSITE_SERVER_NAME}"
 ProxyPass / https://127.0.0.1:3000/
 ProxyPassReverse / https://127.0.0.1:3000/
 # Next.js 12 uses websocket
 <Location /_next/webpack-hmr>
    RewriteEngine On
    RewriteCond %{QUERY_STRING} transport=websocket [NC]
    RewriteCond %{HTTP:Upgrade} websocket [NC]
    RewriteCond %{HTTP:Connection} upgrade [NC]
    RewriteRule /(.*) ws://127.0.0.1:3000/_next/webpack-hmr/$1 [P,L]
    ProxyPass ws://127.0.0.1:3000/_next/webpack-hmr retry=0 timeout=30
    ProxyPassReverse ws://127.0.0.1:3000/_next/webpack-hmr
 </Location>
</VirtualHost>

对于自定义服务器，例如 express，您可能需要使用 app.all 来确保正确传递请求，例如

app.all('/_next/webpack-hmr', (req, res) => {
  nextjsRequestHandler(req, res)
})

Webpack 4 支持已移除

如果您已经在使用 webpack 5，则可以跳过此部分。

Next.js 已采用 webpack 5 作为 Next.js 11 中编译的默认设置。正如在webpack 5 升级文档中沟通的那样，Next.js 12 移除了对 webpack 4 的支持。

如果您的应用程序仍在使用 webpack 4，并使用了选择退出标志，您现在将看到一个错误，链接到webpack 5 升级文档。

target 选项已弃用

如果您的 next.config.js 中没有 target，则可以跳过此部分。

target 选项已被弃用，取而代之的是内置支持，用于跟踪运行页面所需的依赖项。

在 next build 期间，Next.js 将自动跟踪每个页面及其依赖项，以确定部署生产版本的应用程序所需的所有文件。

如果您当前正在使用设置为 serverless 的 target 选项，请阅读有关如何利用新输出的文档。