渐进式采用 Next.js

Next.js 专为渐进式采用而设计。通过 Next.js，您可以继续使用现有代码并按需添加任意多（或少）的 React 功能。从小规模开始并逐步添加更多页面，可以避免完全重写导致的功能开发脱轨。

许多公司需要现代化其技术栈以降低成本、提高开发效率并为客户提供最佳体验。组件驱动开发显著提升了现代代码库的部署速度和可复用性。

凭借每月超过 800 万次下载量，React 已成为开发者首选的组件驱动方案。作为生产级 React 框架，Next.js 让您能够逐步采用 React。

动机

在移动优先的时代，优化和追踪 核心网页指标 对成功至关重要。您的客户可能分布在全球各地，网络速度参差不齐。页面加载或操作完成每多花一秒（甚至毫秒），都可能影响销售、展示或转化效果。

若您正在现代化技术栈，可能面临以下挑战：

• 应用存在多年遗留代码，难以维护且完全重写需耗费数年（及数百万美元）
• 随着应用规模和复杂度增长，页面加载时间持续增加，简单营销页与复杂页面同样缓慢
• 尝试扩展开发团队时，难以在现有代码库中新增开发人员
• 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。

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

了解更多关于 basePath 的信息，请参阅文档。

（注意： 此功能需 Next.js 9.5 及以上版本。若使用旧版，请先升级。）

重定向

第二项策略是创建指向域名根 URL 的新 Next.js 应用，然后在 next.config.js 中使用 rewrites 将部分子路径代理至现有应用。

例如，假设您创建了从 example.com 提供服务的 Next.js 应用，并配置如下 next.config.js。现在，已添加到该 Next.js 应用的页面请求（如添加了 pages/about.js 后的 /about）将由 Next.js 处理，其他路由请求（如 /dashboard）将代理至 proxy.example.com。

module.exports = {
  async rewrites() {
    return [
      // 需定义无操作重定向以优先检查所有页面/静态文件
      {
        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

了解更多，请阅读关于子路径和重定向的文档，或部署微前端示例。