Next.js执行pnpm run build预渲染报错，pnpm run dev运行正常

问题现象 #

• pnpm run dev运行正常，但执行pnpm run build时触发预渲染错误，报错路径为/[slug]
• 错误核心：JSON解析时在位置3遇到意外的冒号

错误日志 #

Error occurred prerendering page "/[slug]". Read more: https://nextjs.org/docs/messages/prerender-error
SyntaxError: Unexpected token : in JSON at position 3
    at JSON.parse (<anonymous>)
    at Response.json (node:internal/deps/undici/undici:6160:23)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async GetData (C:\Users\Yassine98\Documents\APPS_EXPO\shadcn\.next\server\app\[slug]\page.js:374:26)
    at async GetImages (C:\Users\Yassine98\Documents\APPS_EXPO\shadcn\.next\server\app\[slug]\page.js:377:18)
info  - Generating static pages (4/4)

> Build error occurred
Error: Export encountered errors on following paths:
        /[slug]/page: /[slug]

相关代码 #

[slug]/page.tsx #

import GetImages from "@/components/getImages"

type Params = {
  params: {
    slug: string
  }
}

function HomePage({ params }: Params) {
  const name = params.slug

  return (
    <div>
      {/* @ts-expect-error Server Component */}
      <GetImages key={name} name={name} />
    </div>
  )
}

export default HomePage

GetImages.tsx #

/* eslint-disable tailwindcss/classnames-order */
/* eslint-disable @next/next/no-img-element */
/* eslint-disable-next-line tailwindcss/classnames-order */
import React from "react"

import DownButton from "./DownButton"

type Picture = {
  id: string
  imageUrl: string
}
const GetImages = async (name) => {
  async function GetData() {
    const res = await fetch(
      `https://raw.githubusercontent.com/SoufianeAmed/walee/main/${name.name}.json`
    )
    const response = await res.json()
    return response
  }
  const data = await GetData()
  console.log(data)

  return (
    <div className="m-10 bg-[#000212] md:masonry-2-col lg:masonry-3-col mx-auto ">
      {data.map((picture: Picture, idx: number) => {
        return (
          <div key={idx}>
            <div className="break-inside p-8 my-6  rounded-lg">
              <img
                src={picture.imageUrl}
                className="w-fit h-fit"
                alt="Wallee"
              />
            </div>
            <div>
              <DownButton pic={picture.imageUrl} id={picture.id} />
            </div>
          </div>
        )
      })}
    </div>
  )
}

export default GetImages

原因分析 #

1. 预渲染逻辑差异：开发模式下页面是动态请求处理，而构建时Next.js会尝试预渲染所有静态页面。对于动态路由/[slug]，如果没有指定具体的slug值，构建时无法获取有效的JSON文件，导致解析失败。
2. 响应内容异常：请求的JSON文件可能不存在或内容格式错误，返回了非JSON格式的内容（比如HTML错误页面），触发JSON解析报错。

解决方案 #

方案1：指定静态生成的路由参数 #

在[slug]/page.tsx中添加generateStaticParams函数，提供所有可能的slug值，让构建时能预渲染对应页面：

export async function generateStaticParams() {
  // 替换为实际的slug列表，可从API获取或手动定义
  const slugs = ["demo", "test"];
  return slugs.map((slug) => ({
    slug,
  }));
}

方案2：强制动态渲染 #

如果slug数量多或无法提前预知，可将页面改为动态渲染，跳过预渲染步骤：
在[slug]/page.tsx顶部添加：

export const dynamic = "force-dynamic";

方案3：添加响应校验逻辑 #

在GetImages.tsx的GetData函数中添加状态码和格式校验，避免解析无效内容：

async function GetData() {
  const res = await fetch(
    `https://raw.githubusercontent.com/SoufianeAmed/walee/main/${name.name}.json`
  );
  
  // 检查请求是否成功
  if (!res.ok) {
    throw new Error(`请求失败：${res.status} ${res.statusText}`);
  }
  
  // 校验响应是否为JSON格式
  const contentType = res.headers.get("content-type");
  if (!contentType?.includes("application/json")) {
    throw new Error("响应内容不是有效的JSON格式");
  }
  
  const response = await res.json();
  return response;
}

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