我在nextjs 13中创建了一个使用app router的项目。我想实现客户端渲染。在他们的文档中提到,对于在客户端渲染,在文件顶部添加'use client',这将在客户端渲染。但不幸的是,我不能有它的客户端的影响。我被那个缠住了。
这是我的page.js文件:
'use client';
import { useState } from 'react'
export default function Counter() {
const [count, setCount] = useState(0)
console.log("counter")
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
)
}
它应该在客户端呈现,但它不是。
4条答案
按热度按时间wsxa1bj11#
将您的
app/page.js
迁移到pages/index.js
,看看它是否有效。谢谢.g6ll5ycj2#
你的意思是“它应该在客户端呈现,但它不是。"?您是否收到以下错误:“您正在导入一个需要useState的组件。它只能在客户端组件中工作,但它的父组件都没有标记为“使用客户端”,因此它们默认为服务器组件。了解更多信息:https://nextjs.org/docs/getting-started/react-essentials"?如果没有,并且当您单击按钮时计数器增加,则组件在客户端呈现
还有,你用的是最新版本的Next.JS吗?
u4vypkhs3#
如果您在
layout.js
文件中有<main></main>
标记,请将其更改为<body></body
,看看这是否解决了您的问题。如果不告诉我,你怎么调用你的onClick函数。另一个解决方案:尝试通过运行以下命令更新
nodejs
和nextjs
:yarn add next@latest react@latest react-dom@latest
谢谢
bvpmtnay4#
我修复了这个问题,实际上我用旧的nvm版本安装了nodejs更新版本。我更新了我的nvm版本并安装了nodejs,它工作得很好。