Next.js 14 output: export动态路由无法导出问题求助

问题分析 #

从构建日志可见，/leslessives 被标记为 λ (Dynamic) 服务端渲染，但其子路由 /leslessives/[id] 能正常静态生成（SSG）。这说明该路由的页面组件触发了Next.js的动态渲染判定，导致无法在output: export模式下生成对应静态文件。

常见触发动态渲染的原因：

• 页面组件或数据获取函数中使用了运行时依赖（如next/headers、cookies()、request对象等）
• Next.js无法在构建时预解析数据获取逻辑，默认回退到动态渲染
• 未显式指定静态渲染策略

具体解决步骤 #

1. 强制指定静态渲染策略 #

在/leslessives/page.tsx中添加静态渲染配置，强制Next.js在构建时预渲染该页面：

import { getPagesData, getStrapiData } from "app/api/api"
import { StrapiImage } from "@/components/Images/StrapiImage"
import Products from "@/components/Products/products"

// 强制页面静态生成
export const dynamic = 'force-static'

export default async function Web() {
  const products = await getStrapiData("/api/products")
  const hero = await getPagesData("/api/nos-produit")

  return (
    <>
      {/* 原页面内容 */}
    </>
  )
}

2. 排查数据获取函数的动态依赖 #

检查getPagesData和getStrapiData的实现，确保它们无运行时专属依赖：

• 避免在函数内调用headers()、cookies()等Next.js运行时API
• 确保API请求的URL、参数均为构建时可确定的静态值，不依赖请求上下文
• 确认函数中使用的环境变量是构建时注入的，而非运行时动态读取

3. 验证构建结果 #

重新执行构建命令：

yarn build

若构建日志中/leslessives的标记变为○ (Static)或● (SSG)，则配置生效，此时out目录下会生成对应的leslessives文件夹及静态文件。

额外注意事项 #

• 你的next.config.mjs中output: export和trailingSlash: true的配置已正确设置，无需修改
• 确保Strapi API在构建时可正常访问，否则数据预取失败会导致静态生成失败

内容的提问来源于stack exchange，提问作者Rom-888