在Next.js 13中使用useRef Hook时出现错误求助

问题原因 #

Next.js 13的App Router默认将组件视为服务器组件，服务器组件中不允许使用任何React客户端Hook（包括useRef、useEffect这类），这就是错误产生的核心原因。

修复步骤 #

1. 标记页面为客户端组件
   在你的page组件文件顶部添加'use client'指令，让Next.js将其识别为客户端组件，就能正常使用React Hooks了：

'use client'; // 新增这一行
import { FC } from "react"
import { useDraw } from "../hooks/useDraw"

interface pageProps{}

const page: FC<pageProps> = ({}) => {
  const { canvasRef } = useDraw()
  return <div className="w-screen h-screen bg-white flex justify-center items-center">
    <canvas ref={canvasRef} width={750} height={750} className="border border-black rounded"/>
  </div>
}

export default page

2. 可选简化代码
   如果你的pageProps没有实际属性，可以省略接口定义，简化组件写法：

'use client';
import { useDraw } from "../hooks/useDraw"

const Page = () => {
  const { canvasRef } = useDraw()
  return <div className="w-screen h-screen bg-white flex justify-center items-center">
    <canvas ref={canvasRef} width={750} height={750} className="border border-black rounded"/>
  </div>
}

export default Page

额外说明 #

你的自定义HookuseDraw本身写法没有问题，只要确保它在客户端组件中被调用即可。后续若在其他组件中使用该Hook，同样需要保证对应组件是客户端组件（添加'use client'指令）。

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