EQUIPMENT Effect实际上是一个客户端钩子，你不能在服务器上使用它，你必须让那个组件成为一个客户端组件，才能使用像useEffect、useState、任何点击事件、任何表单事件等钩子。
你可以通过在代码的第一行写"use client"来创建一个组件客户端。
请注意使用use client指令将使所有子组件成为客户端组件，并将在用户端呈现，从而影响某些性能，因此建议将客户端组件保留在树的叶子上。

下面是我编写的一个小代码：

• 我正在使用应用程序路由器，* 有2种类型的路由器和文件夹结构和文件约定都是不同的。
• 页面路由器：https://nextjs.org/docs/pages
• 应用程序路由器：https://nextjs.org/docs/app

projectName\src\app\somepage\page.js中的page.js：

import SomeComponent from "../comp/SomeComponent"

const page = () => {
    return (
        <div>
            <h1>A Page </h1>
            <SomeComponent />

            <p>Rest of the page is server-side rendered !</p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis totam vero, laudantium nihil quae, distinctio officia quaerat neque maxime voluptatem ipsam. Quia unde quo deleniti.</p>
        </div>
    )
}

export default page

字符串
SomeComponent.js是（组件文件夹）projectName\src\app\comp\SomeComponent.js中的组件：

'use client'
import React, { useEffect, useMemo, useState } from 'react'

const SomeComponent = () => {

    const [Counter, SetCounter] = useState(0)

    const Double = useMemo(() => Counter * Counter, [Counter])
    // RETURNS DOUBLE OF COUNTER

    useEffect(() => {
        console.log("Page Rendered !!");
    }, [])
    // RUNS ONE TIME

    return (
        <div>
            Counter : {Counter}
            <div>
                Double : {Double}
            </div>
            <div>
                <button onClick={() => SetCounter(Counter + 1)}>+</button>
                <button onClick={() => SetCounter(Counter - 1)}>-</button>
            </div>
        </div>
    )
}

export default SomeComponent

型

请阅读：

• 渲染：https://nextjs.org/docs/app/building-your-application/rendering
• 服务器渲染的好处：https://nextjs.org/docs/app/building-your-application/rendering/server-components#benefits-of-server-rendering
• 服务器组件：https://nextjs.org/docs/app/building-your-application/rendering/server-components
• 客户端组件：https://nextjs.org/docs/app/building-your-application/rendering/client-components
• 客户端渲染的好处：https://nextjs.org/docs/app/building-your-application/rendering/client-components#benefits-of-client-rendering
• 服务器和客户端组合模式：https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns
• 'use client'：https://react.dev/reference/react/use-client
• 如果您还有任何疑问，请留下评论。*