Next.js构建部署报错：useLocalStorage是仅客户端钩子

问题原因 #

你的App.jsx虽然标记了"use client"，但根页面的page.js是默认的服务器组件（未加"use client"指令）。在构建/部署的预渲染阶段，服务器会尝试渲染Home组件，进而触发App组件的代码解析，而useLocalStorage钩子只能在浏览器环境运行，因此触发报错。

快速解决方案（满足你"只要应用正常运行"的需求） #

把page.js也改为客户端组件即可：

1. 在src/app/page.js顶部添加"use client"指令
2. 移除Home函数的async关键字（客户端组件不能是异步函数）

修改后的page.js代码：

// src/app/page.js
"use client";
import App from "./App";

export default function Home() {
  return <App />;
}

可选方案（若后续需要保留服务器组件特性） #

如果之后需要在page.js中保留服务器端逻辑，可以用动态导入强制App组件仅在客户端渲染：

// src/app/page.js
import dynamic from 'next/dynamic';

// 禁用服务器端渲染，仅在客户端加载App组件
const App = dynamic(() => import('./App'), { ssr: false });

export default async function Home() {
  return <App />;
}

内容的提问来源于stack exchange，提问作者Alan P.