Next.js 15使用ISR添加revalidate导出导致构建失败求助

我正在使用Next.js 15，希望通过ISR（增量静态再生）静态渲染页面。由于品类和产品数量众多，多数页面不会在构建阶段生成。

不添加export const revalidate = 3600 * 24时构建可以正常完成，但页面采用服务端渲染模式，而这些页面内容相对静态，这会造成大量资源浪费。

添加该配置后构建失败，报错信息如下：

Invalid config value exports detected, these can cause unexpected behavior from the configs not being applied. Please fix them to continue

相关代码如下：

import { notFound } from 'next/navigation'
import Header from '@components/header/Header'
import Footer from '@components/footer/Footer'
import { slugData } from '@/lib/slugData'
import { getPageState } from '@util/pageState'
import ComplexProduct from '@/slugs/Product'
import Category from '@/slugs/Category'

export const revalidate = 3600 * 24 // 24 hours

export const dynamicParams = true // Allow dynamic params for slugs

export const generateStaticParams = async () => {
  // This function is used to generate static paths for dynamic routes.
  // It can be used to pre-render pages at build time.
  // For slugs, we can fetch a list of all possible slugs from the API.
  return [{
    slug: ['a-product-url']
  }]
}

export const generateMetadata = async ({ params }) => {

  const { slug } = await params

  const { entity, entityParams, errorCode, errorMessage, metadata } = await slugData(slug)

  if (errorCode) {
    return {
      title: 'Page Not Found',
      description: errorMessage,
      keywords: '404, page not found',
      image: '',
    }
  }

  return metadata
}

const SlugPage = async ({ params }) => {

  const { slug } = params

  const { entity, entityParams, errorCode, errorMessage, structuredData } = await slugData(slug)

  const { categories, coupons } = await getPageState()

  if (errorCode && errorCode === 404) {
    notFound()
  } else if (errorCode) {
    console.error(`Error fetching slug data: ${errorMessage} (Code: ${errorCode})`)
    throw new Error(`Server Error: ${errorCode}`)
  }

  const entityMap = {
    'Product': Product,
    'Category': Category,
  }

  const EntityComponent = entityMap[entity?.type]

  return (
    <div>
      <Header categories={categories} coupons={coupons} />
      <EntityComponent id={entity.id} entity={entity} entityParams={entityParams} />
      <Footer />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(structuredData),
        }}
      />
    </div>
  )
}

export default SlugPage

原因分析与解决方案 #

构建失败的核心原因是代码中存在两处语法错误，导致Next.js无法正确解析页面配置导出：

1. generateMetadata中错误使用await处理params
params是Next.js传入的普通对象，并非Promise，无需使用await关键字。错误的await params会触发语法解析错误，进而导致Next.js误判配置导出无效。

2. entityMap中引用未定义的变量
   代码中导入的产品组件是ComplexProduct，但在entityMap中却使用了未定义的Product变量，这会导致构建时变量未找到的错误，干扰配置解析流程。

修复步骤： #

• 修正generateMetadata中的代码，移除await：

  export const generateMetadata = async ({ params }) => {
    const { slug } = params // 去掉await
    // 后续代码不变
  }
  

• 修正entityMap中的组件引用，与导入名称保持一致：

  const entityMap = {
    'Product': ComplexProduct, // 替换为正确的组件名称
    'Category': Category,
  }
  

完成以上修复后，重新执行构建即可正常启用ISR功能，页面会按配置的24小时周期进行增量静态再生。

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