逐步采用 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 的无缝集成，为每次代码更改提供部署预览，使其成为一种协作体验。

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

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