Next.js静态HTML导出报错：Unsupported Server Component type问题

我尝试将基于tailwind-nextjs-starter-blog模板搭建的Next.js博客导出为静态HTML时遇到错误。按照Next.js文档修改了next.config.js配置（直接替换为静态导出配置），执行导出时出现以下错误：

Error occurred prerendering page "/tags/code". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Unsupported Server Component type: {...}
    at em (/Users/charlie/python_projects/tailwind_blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:129087)
    at /Users/charlie/python_projects/tailwind_blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:140081
    at Object.toJSON (/Users/charlie/python_projects/tailwind_blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:143659)
    at stringify (<anonymous>)
    at eE (/Users/charlie/python_projects/tailwind_blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:132044)
    at eR (/Users/charlie/python_projects/tailwind_blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:132487)
    at Timeout._onTimeout (/Users/charlie/python_projects/tailwind_blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:129267)
    at listOnTimeout (node:internal/timers:569:17)
    at process.processTimers (node:internal/timers:512:7)
   Generating static pages (21/43) [==  ] 

修改后的next.config.js：

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
 
  // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
  // trailingSlash: true,
 
  // Optional: Prevent automatic `/me` -> `/me/`, instead preserve `href`
  // skipTrailingSlashRedirect: true,
 
  // Optional: Change the output directory `out` -> `dist`
  // distDir: 'dist',
}
 
module.exports = nextConfig

原next.config.js配置：

/**
 * @type {import('next/dist/next-server/server/config').NextConfig}
 **/
module.exports = () => {
  const plugins = [withContentlayer, withBundleAnalyzer]
  return plugins.reduce((acc, next) => next(acc), {
    reactStrictMode: true,
    pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
    eslint: {
      dirs: ['app', 'components', 'layouts', 'scripts'],
    },
    images: {
      remotePatterns: [
        {
          protocol: 'https',
          hostname: 'picsum.photos',
        },
      ],
    },
    async headers() {
      return [
        {
          source: '/(.*)',
          headers: securityHeaders,
        },
      ]
    },
    webpack: (config, options) => {
      config.module.rules.push({
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      })

      return config
    },
  })
}

请问能否通过修改Server Component类型解决该错误？当前项目配置是否支持导出静态HTML？

1. 修复next.config.js配置 #

你直接替换了原配置，丢失了模板依赖的withContentlayer等插件和关键配置，这是核心问题之一。正确的做法是在原配置基础上添加静态导出相关项：

/**
 * @type {import('next').NextConfig}
 **/
module.exports = () => {
  const plugins = [withContentlayer, withBundleAnalyzer]
  return plugins.reduce((acc, next) => next(acc), {
    output: 'export', // 添加静态导出配置
    reactStrictMode: true,
    pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
    eslint: {
      dirs: ['app', 'components', 'layouts', 'scripts'],
    },
    images: {
      remotePatterns: [
        {
          protocol: 'https',
          hostname: 'picsum.photos',
        },
      ],
      unoptimized: true, // 静态导出必须开启，Next.js Image优化在静态模式下不支持
    },
    async headers() {
      return [
        {
          source: '/(.*)',
          headers: securityHeaders,
        },
      ]
    },
    webpack: (config, options) => {
      config.module.rules.push({
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      })

      return config
    },
  })
}

2. 解决Server Component错误 #

错误提示Unsupported Server Component type的原因是：静态导出要求所有页面/组件都能被预渲染为静态HTML，不能包含无法序列化或只能在服务器端运行的逻辑。你可以通过以下方式解决：

• 检查并修复数据序列化问题：如果/tags/code页面的Server Component返回了无法转成JSON的对象（比如函数、Symbol等），需要调整数据结构，确保所有传递给客户端的内容都是可序列化的。
• 转为Client Component：如果组件依赖了只能在Node.js环境运行的API（比如文件系统、服务器端专属工具），可以在组件顶部添加'use client'指令，转为客户端组件。注意仅在必要时使用，避免不必要的 hydration 开销。
• 确保预渲染友好的数据获取：在App Router中，使用generateStaticParams生成静态路由参数，同时确保fetch调用使用默认的cache: 'force-cache'，让数据在构建时预获取并嵌入静态HTML。

3. 项目配置支持静态HTML导出 #

只要修复上述配置和组件问题，该模板完全支持静态HTML导出。静态导出模式下，Next.js会在构建时生成所有静态页面，无需服务器运行，可直接部署到静态托管平台。

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