Next.js 如何仅重新构建新增及更新页面？

完全可以实现仅构建差异页面或指定固定页面，以下分场景给出具体方案：

一、静态生成（SSG/ISR）页面的增量构建 #

如果你的页面采用静态生成模式，Next.js提供两种核心优化方式：

• 增量静态再生（ISR）：在getStaticProps中配置revalidate参数，比如revalidate: 3600，页面会在后台异步更新，仅重新生成需要更新的页面，其余页面复用已有静态文件，无需全量构建。
• 指定页面构建：通过构建命令的--include或--exclude参数筛选目标页面。比如只构建动态文章页和新增页面：

  next build --include="pages/posts/**,pages/new-page-*.js"
  

  或者排除无需构建的固定页面：

  next build --exclude="pages/about.js,pages/contact.js"
  

二、服务端渲染（SSR）/API路由的优化 #

你提到新增页面通过NodeJS后端API路由创建，这类页面属于运行时动态生成，无需提前构建：

• SSR页面在构建阶段仅编译代码，不会预渲染内容，实际请求时才动态生成。新增SSR页面只要代码部署完成，访问时自动生效，无需单独触发构建。
• 对于仅内容更新的页面，由于内容通过API获取并同步到Redux状态，页面代码无变更时，无需重新构建，只要后端API返回新内容即可。

三、CI/CD流程的精细化控制 #

在CI/CD流程中，可通过脚本判断页面变更范围，实现精准构建：

1. 用Git diff提取最近提交中修改的页面文件：

   git diff --name-only HEAD~1 HEAD | grep "pages/"
   

2. 将结果作为--include参数传入next build命令，仅构建发生变更的页面。

四、注意事项 #

• 若使用Next.js 13+的App Router，增量构建逻辑更完善，默认支持部分页面的增量更新，无需额外复杂配置。
• 若公共组件发生全局变更，关联页面仍需重新构建，可结合组件级缓存优化减少影响。

内容的提问来源于stack exchange，提问作者Micael Coutinho