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

Next.js 的设计理念是逐步采用。借助 Next.js，您可以继续使用现有代码，并根据需要添加任意数量（或少量）的 React。通过从小处着手，逐步添加更多页面，您可以避免因完全重写而导致功能开发脱轨。

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

凭借超过每月 800 万次的下载量，React 是开发者首选的组件驱动框架。Next.js，这个用于生产环境的 React 框架，使您能够逐步采用 React。

动机

在一个日益移动化的世界中，改进和跟踪您的 Core Web Vitals 对于成功至关重要。您的客户可能分布在世界各地，互联网速度各不相同。页面加载或操作完成的每增加一秒（或毫秒）的时间，都可能是促成销售、展示或转化的关键。

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

您的应用程序有多年难以理解的遗留代码，完全重写将耗费数年（和数百万美元）。
随着应用程序规模和复杂性的增长，您的页面加载时间持续增加。简单的营销页面与最复杂的页面一样慢。
您正在尝试扩展开发团队，但在向现有代码库添加更多开发人员时遇到问题。
您的 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 将某些子路径代理到您现有的应用程序。

例如，假设您创建了一个要从 example.com 提供的 Next.js 应用程序，并具有以下 next.config.js。现在，对您添加到此 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*`,
      },
    ];
  },
};

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

微前端与 Monorepos 和子域名

Next.js 和 Vercel 使采用微前端并以 Monorepo 形式部署变得容易。这使您可以使用子域名来逐步采用新的应用程序。微前端的一些优势：

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

部署到 Vercel 的 monorepo 架构。

一旦您的 monorepo 设置完成，像往常一样将更改推送到您的 Git 仓库，您将看到提交部署到您已连接的 Vercel 项目。告别过时的 CI/CD 流程。

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

结论

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

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

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