逐步采用 Next.js | Next.js 框架

Next.js 旨在支持逐步采用。使用 Next.js，您可以继续使用现有的代码，并根据需要添加任意数量的 React 代码。从小处着手，逐步添加更多页面，可以避免进行彻底重写，从而防止功能开发脱轨。

许多公司需要对其技术栈进行现代化改造，以降低成本、提高开发人员的工作效率，并为客户提供最佳体验。组件驱动开发极大地提高了现代代码库的部署速度和可重用性。

而且，React 每月下载量超过 800万次，是开发人员首选的组件驱动方案。Next.js 是一款用于生产环境的 React 框架，它使您能够逐步采用 React。

动机

在日益普及的移动世界中，改进和跟踪您的核心 Web 指标对于取得成功至关重要。您的客户可能分布在世界各地，互联网速度各不相同。页面加载或操作完成所需的每一秒（或毫秒）都可能是达成销售、展示或转化的关键因素。

如果您正在对技术栈进行现代化改造，您可能会面临以下挑战

您的应用程序包含多年的遗留代码，难以理解，并且需要花费数年时间（以及数百万美元）才能完全重写。
随着应用程序规模和复杂性的增加，页面加载时间持续增加。简单的营销页面与最复杂的页面加载速度一样慢。
您正在尝试扩展开发团队，但遇到在现有代码库中添加更多开发人员的问题。
您的 CI/CD 和 DevOps 流程已过时，这降低了开发人员的工作效率，并使安全可靠地推出新的更改变得困难。
您的应用程序对移动设备没有响应，并且无法更新全局页面样式而不会破坏应用程序的其他部分。

您知道需要做一些事情，但要了解从哪里开始可能很让人不知所措。通过逐步采用 Next.js，您可以开始解决上述问题并转换您的应用程序。让我们讨论一些将 Next.js 采用到现有技术栈中的不同策略。

策略

子路径

第一种策略是配置您的服务器或代理，以便特定子路径下的所有内容都指向 Next.js 应用程序。例如，您的现有网站可能位于 example.com，您可以配置代理，以便 example.com/store 提供 Next.js 电子商务商店。

使用 basePath，您可以配置 Next.js 应用程序的资产和链接，使其能够自动与新的子路径 /store 协同工作。由于 Next.js 中的每个页面都是其自己的独立路由，因此诸如 pages/products.js 之类的页面将在您的应用程序中路由到 example.com/store/products。

next.config.js

module.exports = {
  basePath: '/store',
};

要了解有关 basePath 的更多信息，请查看我们的文档。

(注意：此功能在 Next.js 9.5 及更高版本中引入。如果您使用的是旧版本的 Next.js，请在尝试使用它之前进行升级。)

重写

第二种策略是创建一个新的 Next.js 应用程序，该应用程序指向域的根 URL。然后，您可以使用 next.config.js 内部的 rewrites 将某些子路径代理到您的现有应用程序。

例如，假设您创建了一个 Next.js 应用程序，该应用程序使用以下 next.config.js 从 example.com 提供服务。现在，对您添加到此 Next.js 应用程序中的页面的请求（例如，如果您添加了 pages/about.js，则为 /about）将由 Next.js 处理，而对任何其他路由的请求（例如，/dashboard）将被代理到 proxy.example.com。

next.config.js

module.exports = {
  async rewrites() {
    return [
      // we need to define a no-op rewrite to trigger checking
      // all pages/static files before we attempt proxying
      {
        source: '/:path*',
        destination: '/:path*',
      },
      {
        source: '/:path*',
        destination: `https://proxy.example.com/:path*`,
      },
    ];
  },
};

要了解有关重写的更多信息，请查看我们的文档。

使用单存储库和子域的微前端

Next.js 和 Vercel 使采用微前端并作为单存储库部署变得容易。这使您可以使用子域以逐步采用新的应用程序。微前端的一些优势

更小、更具凝聚力和可维护性的代码库。
更具可扩展性的组织，拥有解耦的、自主的团队。
能够以更渐进的方式升级、更新甚至重写前端的某些部分。

部署到 Vercel 的单存储库架构。

设置好单存储库后，像往常一样将更改推送到您的 Git 存储库，您将看到提交部署到您已连接的 Vercel 项目中。告别过时的 CI/CD 流程。

Git 集成提供的部署 URL 示例。

结论

Next.js 旨在逐步集成到您现有的技术栈中。Vercel 平台通过与 GitHub、GitLab 和 Bitbucket 无缝集成，为每次代码更改提供部署预览，使其成为一种协作体验。

使用快速刷新即时预览本地更改，从而提高开发人员的生产力。
推送更改以创建分支预览，针对与利益相关者的协作进行了优化。
通过合并 PR 部署到生产环境中，使用 Vercel。无需复杂的 DevOps 操作。

要了解更多信息，请阅读有关子路径和重写的内容，或部署具有微前端的示例。