Next.js 14.1.0中`export const dynamic`的放置位置及相关疑问

1. export const dynamic 配置的添加位置 #

文档里说的“添加到page”，指的是对应catch-all路由的page组件文件。比如你的catch-all路由路径是app/[...slug]/page.js（或.tsx），直接在这个文件的组件定义外部导出配置项就行：

// app/[...slug]/page.js
export default function CatchAllPage({ params }) {
  // 页面渲染逻辑
  return <div>当前路径：{params.slug.join('/')}</div>;
}

// 在组件外部添加配置
export const dynamic = 'force-static'; // 或根据需求用 'force-dynamic'

2. 配置的添加范围 #

只需要给出现问题的catch-all segments页面添加即可，不需要修改所有页面。错误提示明确是该类路由在运行时发生了静态/动态模式的切换，其他正常页面不受影响。

3. 已尝试配置后的排查方向 #

如果你已经在catch-all页面添加了export const dynamic = 'force-dynamic'并重新构建但问题依旧，可以检查：

• 确认配置项是写在文件顶层（不是组件函数内部），Next.js才能正确识别这个路由配置
• 查看页面代码里是否有触发动态渲染的逻辑（比如调用cookies()、headers()这类仅动态环境可用的API），如果有，force-static会触发冲突，此时必须用force-dynamic
• 清理Next.js缓存后重新构建：删除项目根目录的.next文件夹，再执行npm run build

内容的提问来源于stack exchange，提问作者Nesar Ahmed