如何优化您的 Next.js 应用程序以用于生产环境
在将您的 Next.js 应用程序投入生产之前，您应该考虑实施一些优化和模式，以获得最佳的用户体验、性能和安全性。
本页提供了在构建应用程序和投入生产之前可供参考的最佳实践，以及您应该了解的Next.js 自动优化。
自动优化
这些 Next.js 优化默认启用，无需配置
- 代码拆分： Next.js 会自动按页面拆分您的应用程序代码。这意味着导航时只加载当前页面所需的代码。您也可以考虑在适当的情况下延迟加载第三方库。
- 预取： 当指向新路由的链接进入用户视口时，Next.js 会在后台预取该路由。这使得导航到新路由几乎是即时的。您可以在适当的情况下选择禁用预取。
- 自动静态优化： 如果页面没有阻塞数据需求，Next.js 会自动确定该页面是静态的（可以预渲染）。优化的页面可以被缓存，并从多个 CDN 位置提供给最终用户。您可以在适当的情况下选择服务器端渲染。
这些默认设置旨在提高应用程序的性能，并降低每次网络请求传输的数据成本和数量。
开发过程中
在构建应用程序时，我们建议使用以下功能以确保最佳性能和用户体验
路由和渲染
数据获取和缓存
- API 路由： 使用路由处理程序访问后端资源，并防止敏感秘密暴露给客户端。
- 数据缓存： 验证数据请求是否被缓存，并在适当的情况下选择缓存。确保不使用
getStaticProps的请求在适当的情况下被缓存。 - 增量静态再生： 使用增量静态再生在页面构建后更新静态页面，而无需重建整个网站。
- 静态图片： 使用
public目录自动缓存应用程序的静态资产，例如图片。
UI 和辅助功能
- 字体模块： 通过使用字体模块优化字体，该模块自动将您的字体文件与其他静态资产一起托管，消除外部网络请求，并减少布局偏移。
<Image>组件： 通过使用 Image 组件优化图片，该组件自动优化图片，防止布局偏移，并以 WebP 等现代格式提供图片。<Script>组件： 通过使用 Script 组件优化第三方脚本，该组件自动延迟脚本并防止它们阻塞主线程。- ESLint： 使用内置的
eslint-plugin-jsx-a11y插件及早发现辅助功能问题。
安全
- 环境变量： 确保您的
.env.*文件已添加到.gitignore，并且只有公共变量以NEXT_PUBLIC_为前缀。 - 内容安全策略： 考虑添加内容安全策略以保护您的应用程序免受各种安全威胁，例如跨站脚本、点击劫持和其他代码注入攻击。
元数据和 SEO
<Head>组件： 使用next/head组件添加页面标题、描述等。
类型安全
- TypeScript 和 TS 插件： 使用 TypeScript 和 TypeScript 插件以获得更好的类型安全性，并帮助您及早发现错误。
投入生产之前
在投入生产之前，您可以运行 next build 在本地构建您的应用程序并捕获任何构建错误，然后运行 next start 在类似生产的环境中衡量应用程序的性能。
核心 Web 指标
- Lighthouse： 在隐身模式下运行 Lighthouse，以更好地了解用户如何体验您的网站，并确定需要改进的领域。这是一个模拟测试，应与查看现场数据（例如核心 Web Vitals）结合使用。
分析捆绑包
使用 @next/bundle-analyzer 插件分析 JavaScript 捆绑包的大小，并识别可能影响应用程序性能的大型模块和依赖项。
此外，以下工具可以帮助您了解添加新依赖项对应用程序的影响
这有帮助吗？