Next.js执行npm run build时预渲染首页出现多类错误求助

下面针对你遇到的三个错误逐一解决：

1. 组件需要useState但父组件未标记"use client" #

这个错误是误导性的，根源在于组件导入方式错误（见错误2），导致客户端组件未被正确识别。修复导入问题后，该错误会自动消失。

2. 无法从'./components/navbar'导出'Navbar' #

直接原因是：Navbar组件用的是默认导出（export default function Navbar()），但page.js里用了命名导入（import { Navbar } from './components/navbar'），两者不匹配。

修复方式：修改page.js中的导入语句为默认导入：

// 原代码
import { Navbar } from './components/navbar'

// 修改后
import Navbar from './components/navbar'

3. SyntaxError: Unexpected token u in JSON at position 0 #

这个错误通常是尝试解析undefined为JSON时触发的（比如调用JSON.parse(undefined)）。在当前提供的代码中没有直接出现，但大概率是前两个错误导致组件加载异常，间接引发了这个错误。

解决方式：先修复前两个问题，重新执行npm run build，该错误大概率会随之消失。如果仍存在，检查项目中其他预渲染阶段执行JSON解析的代码，确保传入的是有效JSON字符串而非undefined。

修改后的完整代码 #

page.js

import Image from 'next/image'
import { Inter } from 'next/font/google'
import styles from './page.module.css'
import Navbar from './components/navbar'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <main className={styles.main}>
      <Navbar/>
    </main>
  )
}

navbar组件（无需修改）

"use client";

import React, { useState } from 'react';

export default function Navbar() {
  const [showNav, setShowNav] = useState(false);
  const [loggedIn, setLoggedIn] = useState(false);

  return (
    <nav
      className="fixed top-0 left-0 w-full h-10 bg-gray-100 border-b border-gray-300"
      onMouseEnter={() => setShowNav(true)}
      onMouseLeave={() => setShowNav(false)}
    >
      <div className="flex items-center h-full">
        <div className="ml-4 font-bold">Boxing Trainer</div>
        {loggedIn && (
          <div className="flex items-center justify-center flex-1">
            <div className="w-6 h-6 mr-2 bg-gray-300 rounded-full"></div>
          </div>
        )}
        <div className="flex items-center justify-end flex-1">
          {!loggedIn && (
            <>
              <button className="px-4 py-2 mr-4 text-sm font-medium text-gray-500 border border-blue-500 rounded-lg hover:bg-blue-500 hover:text-white focus:outline-none focus:ring focus:ring-blue-500 focus:ring-opacity-50">
                Login
              </button>
              <button className="px-4 py-2 mr-4 text-sm font-medium text-gray-500 border border-blue-500 rounded-lg hover:bg-blue-500 hover:text-white focus:outline-none focus:ring focus:ring-blue-500 focus:ring-opacity-50">
                Signup
              </button>
            </>
          )}
          {loggedIn && (
            <button className="px-4 py-2 mr-4 text-sm font-medium text-gray-500 border border-blue-500 rounded-lg hover:bg-blue-500 hover:text-white focus:outline-none focus:ring focus:ring-blue-500 focus:ring-opacity-50">
              Logout
            </button>
          )}
        </div>
      </div>
    </nav>
  );
};

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