Next.JS 有“仅客户端钩子”错误

Question

我正在编写我的第一个 Next.JS 应用程序，并且在构建或部署时收到此错误：

Error occurred prerendering page "/"
Error: useLocalStorage is a client-only hook
    at m (/private/var/www/trivia/.next/server/app/page.js:8:2618)

我的代码如下：

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

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

// src/app/App.jsx
"use client";

import { useLocalStorage } from "@uidotdev/usehooks";

export default function App({ quotes, todaysDate }) {
  const [name, setName] = useLocalStorage("name", null);

  ...
}

在

App.jsx

我有

use client

...这不是让它在客户端渲染，所以我可以在这里使用钩子吗？

我现在并不关心它是服务器端还是客户端渲染，我只想看到它运行。

提前致谢。

Answer 1

根据这个答案，您需要将应用程序封装在组件中并动态导入它并禁用 str 渲染

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(() => import('<PATH_TO_YOUR_COMPONENT>'), {
  ssr: false
})

export default () => <DynamicComponentWithNoSSR />