Next.js 12 带来了多项重大改进，包括使用 SWC 替代 Babel、提升构建速度、改进 CSS 解析和 HMR 配置。本文将为你详细解读这些变化，并提供实用的升级指南和代码片段。
Next.js 12 是一个重大版本更新，它引入了多种改进，包括使用 Rust 基础的 SWC 编译器替代 Babel，大幅提升了 java script/TypeScript 的编译速度。此外，还在 CSS 解析、HMR 连接和构建优化等方面进行了重要升级。本文将深入探讨这些变化，并提供具体的升级步骤和实战技巧。
1. Node.js 版本升级
Next.js 12 要求最低 Node.js 版本为 12.22.0。这是第一个支持原生 ES Modules 的 Node.js 版本，带来了性能和功能的双重提升。
升级 Node.js 版本是确保 Next.js 12 能够充分利用其新特性的第一步。你可以使用 nvm 或 n 等工具来切换 Node.js 版本。确保你的项目环境和依赖项都兼容新版本。
2. React 版本升级
Next.js 12 要求 React 的最低版本为 17.0.2。如果你的应用尚未使用最新版本的 React，需要运行以下命令进行升级：
npm install react@latest react-dom@latest
或者使用 Yarn：
yarn add react@latest react-dom@latest
确保你安装的 React 版本与你的项目需求匹配，并检查是否有任何兼容性问题需要处理。
3. 使用 SWC 替代 Babel
Next.js 12 引入了基于 Rust 的 SWC 编译器，用于替代 Babel。这一改变带来了显著的性能提升，单独文件编译速度提高了 17 倍，Fast Refresh 速度提高了 5 倍。
SWC 提供了与 Babel 相同的兼容性，包括 styled-jsx 和 tree-shaking 等默认转换。如果你的应用使用了自定义的 Babel 配置，Next.js 将自动回退到使用 Babel，以保持兼容性。
为了优先考虑哪些转换可以帮助你采用 SWC，请在反馈线程中提供你的 .babelrc 文件。未来，许多与外部库的集成（如 Styled Components、Emotion、Relay）将被迁移到基于 SWC 的转换中。
4. 使用 SWC 进行 java script 压缩
Next.js 12 提供了一个选项，允许你使用 SWC 替代 Terser 进行 java script 压缩。这一功能可以将压缩速度提升 7 倍，你只需在 next.config.js 中添加以下配置：
module.exports = {
swcMinify: true,
}
需要注意的是，SWC 压缩是可选功能，以确保其在真实场景中的稳定性。如果你对压缩有反馈，可以在反馈线程中提出。
5. 改进的 styled-jsx CSS 解析
Next.js 12 引入了基于 styled-jsx Babel 转换的 CSS 解析器。这一改进使得 CSS 解析更加准确，能够更好地处理复杂样式，并在发现无效 CSS 时抛出错误，避免了之前可能引发的意外行为。
这意味着在开发和构建过程中，任何无效的 CSS 都会触发错误，而不是被忽略。此更改仅影响 styled-jsx 的使用。如果你正在使用 styled-jsx，建议检查并修复任何可能的无效 CSS 问题。
6. next/image 元素的包装方式变化
在 Next.js 12 中，next/image 现在将 <img> 元素包裹在 <span> 中，而不是 <div>。这一变化可能导致你现有的 CSS 选择器出现问题，例如 .container span 可能无法正确匹配新的 <span> 元素。
为了避免这一问题，你可以通过限制选择器到特定类名来解决，例如 .container span.item，并更新相关组件的类名。或者，你可以在 <Image> 组件外添加一个带有特定类名的 <div>，以确保选择器能够正确匹配。
7. HMR 连接使用 WebSocket
Next.js 12 改用了 WebSocket 连接来处理热模块替换（HMR），这比之前的 server-sent events 连接更加高效和可靠。如果你在使用代理服务器（如 Nginx）或自定义服务器（如 Express），需要确保 WebSocket 升级请求被正确处理。
对于 Nginx，你需要在配置文件中添加以下内容：
location /_next/webpack-hmr {
proxy_pass http://localhost:3000/_next/webpack-hmr;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
对于 Express 服务器，你可以使用 app.all 来确保请求被正确传递：
app.all('/_next/webpack-hmr', (req, res) => {
nextjsRequestHandler(req, res)
})
8. 移除对 Webpack 4 的支持
Next.js 12 移除了对 Webpack 4 的支持，默认使用 Webpack 5。如果你的应用仍在使用 Webpack 4，你需要在 next.config.js 中设置 cleanDistDir: false 来禁用此功能。
Webpack 5 带来了许多改进，如更好的性能、更小的打包体积和增强的 tree-shaking 功能。确保你的项目已经迁移到 Webpack 5，并检查是否有任何自定义配置需要更新。
9. 移除 target 选项
Next.js 12 移除了 target 选项，取而代之的是内置的依赖追踪功能。在 next build 过程中，Next.js 会自动追踪每个页面及其依赖项，以确定需要部署的所有文件。
如果你之前使用了 target 选项并设置为 serverless，请参考新的输出配置文档，以利用这一改进。这一变化简化了构建配置，提高了构建效率。
10. 移除 pages/_app.js 中的 componentDidCatch 方法
Next.js 11 已经移除了 next/app 组件的 componentDidCatch 方法，因为它不再需要，并且在 Next.js 11 中已被移除。如果你在 pages/_app.js 中有自定义的 componentDidCatch 方法，请移除 super.componentDidCatch，因为它不再需要。
11. 移除 pages/_app.js 中的 Container 导出
Container 导出自 Next.js 9 起已被弃用，并且在 Next.js 11 中被移除。如果你在 pages/_app.js 中导入了 Container，请移除它，因为它不再需要。
12. 移除 page 组件中的 props.url 使用
props.url 从 Next.js 4 起已被弃用，并在 Next.js 11 中被移除。如果你的页面组件中仍在使用 props.url，请移除它，并改用 getStaticProps 或 getServerSideProps 提供的 props。
13. 实战技巧与配置建议
使用 SWC 提升编译速度
为了充分利用 SWC 的性能优势，建议在 next.config.js 中启用 swcMinify 选项。这将显著提升你的构建速度，使开发和部署更加高效。
module.exports = {
swcMinify: true,
}
配置 HMR 使用 WebSocket
如果你使用的是代理服务器（如 Nginx）或自定义服务器（如 Express），确保 WebSocket 升级请求被正确处理。这将提高 HMR 的响应速度和稳定性。
处理 next/image 的包装元素变化
如果你的应用有特定的 CSS 选择器针对 <span> 或 <div>，请检查是否需要调整选择器以适应新的包装方式。例如，你可以将 .container span 改为 .container span.item，并更新相关组件的类名。
优化 CSS 解析
使用 Next.js 12 提供的改进 CSS 解析器，可以确保你的样式更加准确和可靠。在开发过程中，任何无效的 CSS 都会触发错误，帮助你及时发现并修复问题。
配置 Webpack 5
确保你的项目已经迁移到 Webpack 5，并检查是否有任何自定义配置需要更新。Webpack 5 提供了许多改进，如更好的性能、更小的打包体积和增强的 tree-shaking 功能。
禁用 distDir 清理
如果你的应用依赖于 distDir 的旧行为，请在 next.config.js 中设置 cleanDistDir: false 以禁用新的默认清理行为。这将确保你的构建输出保持一致。
使用 PORT 环境变量设置端口
Next.js 11 引入了对 PORT 环境变量的支持，允许你设置应用运行的端口。例如：
PORT=4000 next start
这为端口设置提供了更灵活的选项，特别是在某些受限环境中。
14. 其他注意事项
检查依赖项兼容性
确保所有依赖项都与 Next.js 12 兼容。你可以使用 npm outdated 或 yarn outdated 来检查依赖项的版本，并更新到最新版本。
更新开发工具
使用最新的开发工具（如 VS Code 插件）来提升开发效率。例如，GitHub Copilot 和 Cursor 等 AI 辅助编程工具可以帮助你更快地编写代码。
配置 Tailwind CSS 和 Shadcn UI
在 Next.js 12 中，你可以使用 Tailwind CSS 和 Shadcn UI 来提升 UI 开发效率。确保你的项目配置正确，并充分利用这些工具的优势。
优化构建流程
使用 next.config.js 中的优化配置，如 swcMinify 和 cleanDistDir，来提升构建流程的效率和稳定性。
测试与调试
在升级后，务必进行充分的测试和调试，确保所有功能正常运行。使用工具如 React Developer Tools 和 Chrome DevTools 来帮助你发现和修复问题。
15. 总结
Next.js 12 带来了多项重大改进，包括使用 SWC 替代 Babel、提升构建速度、改进 CSS 解析和 HMR 连接配置等。这些变化不仅提升了性能，还提高了开发体验和代码质量。通过遵循上述升级步骤和实战技巧，你可以顺利迁移到 Next.js 12，并充分利用其新特性。
关键字列表: Next.js, SWC, Babel, 构建优化, AI 辅助编程, Webpack 5, Tailwind CSS, React, HMR, 现代 Web 栈