Next.js部署Vercel时预渲染页面报错问题求助

问题描述 #

在Vercel部署Next.js项目时，多个页面（如/bollywood）出现「Error occurred prerendering page」错误，但本地开发环境运行完全正常。

相关代码 #

/bollywood/page.jsx #

import Hero from '@/components/Hero'
import Page_reuseable from '@/components/Page_reuseable'
import Subscribe from '@/components/Subscribe'
import React from 'react'

export default function Page() {
  return (
    <>
      <Hero link={'category/bollywood'} />
      <Page_reuseable category={"Bollywood"} />
      <Subscribe />
    </>
  )
}

components/Hero.jsx #

async function fetch_data(link) {
    const req = await fetch(`${process.env.NEXT_PUBLIC_DEVELOPMENT_BACKEND_URL}/${link}?limit=1`, { credentials: "include", headers: { "x-api-key": process.env.API_KEY }, cache: "no-cache" })
    const res = await req.json()
    if (res.status == 'success') {
        return res.posts[0]
    } else {
        return []
    }
}

export default async function Hero({ link }) {
    const data = await fetch_data(link)

    return (
        <>
          {/* JSX内容 */}
        </>
    )
}

components/Page_reuseable.jsx #

async function fetchData(category, limit) {
    const req = await fetch(`${process.env.NEXT_PUBLIC_DEVELOPMENT_BACKEND_URL}/category/${category}?limit=${limit}`, { credentials: 'include', headers: { "x-api-key": process.env.API_KEY }, cache: "no-cache" })
    const res = await req.json()
    if (res.status === 'success') {
        return res.posts;
    } else {
        return [];
    }
}

export default async function Page_reuseable({ category }) {
    let limit = 11
    const data = await fetchData(category, limit)

    return (
        <>
              {/* JSX内容 */}
        </>
    )
}

错误日志 #

Error: Unsupported Server Component type: {...}
    at em (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:131932)
    at /vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142926
    at Array.toJSON (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:146504)
    at stringify (<anonymous>)
    at eR (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:134889)
    at eP (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135332)
    at AsyncLocalStorage.run (node:async_hooks:338:14)
    at Timeout._onTimeout (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:146956)
    at listOnTimeout (node:internal/timers:569:17)
    at process.processTimers (node:internal/timers:512:7)
TypeError: i is not iterable
    at i (/vercel/path0/.next/server/chunks/231.js:1:6898)
    at o (/vercel/path0/.next/server/chunks/231.js:1:1213)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
TypeError: i is not iterable
    at i (/vercel/path0/.next/server/chunks/231.js:1:6898)
    at o (/vercel/path0/.next/server/chunks/231.js:1:1213)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Error occurred prerendering page "/bollywood". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: i is not iterable
    at i (/vercel/path0/.next/server/chunks/231.js:1:6898)
    at o (/vercel/path0/.next/server/chunks/231.js:1:1213)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

   Generating static pages (8/16) 
[]
[]
[]

// getting this error as well
TypeError: i is not iterable
    at i (/vercel/path0/.next/server/chunks/231.js:1:6898)
    at o (/vercel/path0/.next/server/chunks/231.js:1:1213)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
TypeError: i is not iterable
    at i (/vercel/path0/.next/server/chunks/231.js:1:6898)
    at o (/vercel/path0/.next/server/chunks/231.js:1:1213)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Error occurred prerendering page "/dollywood". Read more: https://nextjs.org/docs/messages/prerender-error

排查分析 #

1. 环境变量未同步：本地依赖.env文件配置的环境变量，但Vercel部署时未添加NEXT_PUBLIC_DEVELOPMENT_BACKEND_URL和API_KEY，导致后端请求失败，返回数据不符合预期。
2. 数据类型不匹配：Hero组件的fetch_data函数成功时返回单个对象，失败时返回数组，组件JSX中若将数组当作对象访问属性，会触发类型错误，导致Server Component序列化失败。
3. Credentials配置冗余：预渲染阶段无用户会话，credentials: "include"会导致请求异常，无法正确获取数据。
4. 空数据处理疏漏：Page_reuseable组件若对空数组做错误处理，或后端返回的res.posts非数组类型，会引发i is not iterable错误。

解决办法 #

1. 同步Vercel环境变量 #

进入Vercel项目的Settings -> Environment Variables，添加NEXT_PUBLIC_DEVELOPMENT_BACKEND_URL和API_KEY，确保值与本地.env文件一致，保存后重新部署。

2. 修正Hero组件数据返回逻辑 #

统一数据返回类型，添加请求错误捕获，并移除冗余的credentials配置：

async function fetch_data(link) {
    try {
        const req = await fetch(`${process.env.NEXT_PUBLIC_DEVELOPMENT_BACKEND_URL}/${link}?limit=1`, { 
            credentials: "omit",
            headers: { "x-api-key": process.env.API_KEY }, 
            cache: "no-cache" 
        })
        if (!req.ok) return null;
        const res = await req.json()
        return res.status == 'success' ? (res.posts[0] || null) : null
    } catch (err) {
        console.error('Hero数据请求失败:', err)
        return null
    }
}

export default async function Hero({ link }) {
    const data = await fetch_data(link)

    return (
        <>
          {data ? (
            {/* 原JSX内容，正常访问data属性 */}
            <div>{data.title}</div>
          ) : (
            <div>暂无内容</div>
          )}
        </>
    )
}

3. 优化Page_reuseable组件请求逻辑 #

添加错误捕获，确保返回可迭代的数组：

async function fetchData(category, limit) {
    try {
        const req = await fetch(`${process.env.NEXT_PUBLIC_DEVELOPMENT_BACKEND_URL}/category/${category}?limit=${limit}`, { 
            credentials: "omit",
            headers: { "x-api-key": process.env.API_KEY }, 
            cache: "no-cache" 
        })
        if (!req.ok) return [];
        const res = await req.json()
        return Array.isArray(res.posts) ? res.posts : []
    } catch (err) {
        console.error('列表数据请求失败:', err)
        return []
    }
}

4. 可选：强制动态渲染 #

若页面依赖实时数据或用户会话，可在page.jsx中添加动态渲染配置，跳过静态预渲染：

export const dynamic = "force-dynamic"

export default function Page() {
  // ...原页面代码
}

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