Next.js - 设置 onClick 处理程序时遇到问题

访问时我很惊讶react.dev这么说create-react-app不再建议用于 React 应用程序引导。

好吧，世界发生了变化，让我们深入了解我的第一个应用程序的 Next.js...

import Image from 'next/image'
import styles from './page.module.css'

export default function Home() {

  function handleClick() {
    console.log("Clicked me!");
    alert("Clicked me!");
  }


  return (
    <main className={styles.main}>
      <div className={styles.description}>
        <p>
          Get started by editing&nbsp;
          <code className={styles.code}>src/app/page.js</code>
        </p>
        <div>
          TESTE
        </div>
        <button onClick={handleClick()}>Click me</button>
      </div>
    </main>
  )
}

令人惊讶的是我收到以下错误：

Unhandled Runtime Error
Error: alert is not defined

我知道 Next.js 具有服务器端渲染，但我不明白为什么我不能使用简单的警报来弹出浏览器消息。

看来我应该开始学习新概念了......

为什么我的警报在 Next.js 上出现错误？

为什么是我的console.log不在浏览器上显示而是在控制台上显示？

首先，设置时onClick，你正在呼叫handleClick()。您应该传递它的引用：

<button onClick={handleClick}>Click me</button>

正如您所做的那样，在服务器上渲染组件时会调用该函数，这就是您收到该错误的原因。执行上述操作后，您将收到一个新错误：

如果您需要交互性，请考虑将其部分转换为客户端组件。

那是因为，在app目录，默认情况下，Next.js 使用服务器组件，其中 JSX 被编译为“纯 HTML”并发送到浏览器，正如您可以在doc:

服务器组件允许开发人员更好地利用服务器基础设施。例如，以前会影响客户端上的 JavaScript 包大小的大型依赖项现在可以改为完全保留在服务器上，从而提高性能。它们使编写 React 应用程序的感觉类似于 PHP 或 Ruby on Rails，但具有 React 模板化 UI 的强大功能和灵活性。

服务器组件不应包含特定于客户端的代码，例如单击处理程序。如果你需要的话，你应该添加"use client"在顶部，使其成为客户端组件:

"use client";

import Image from 'next/image'
import styles from './page.module.css'

export default function Home() {

  function handleClick() {
    console.log("Clicked me!");
    alert("Clicked me!");
  }


  return (
    <main className={styles.main}>
      <div className={styles.description}>
        <p>
          Get started by editing&nbsp;
          <code className={styles.code}>src/app/page.js</code>
        </p>
        <div>
          TESTE
        </div>
        <button onClick={handleClick}>Click me</button>
      </div>
    </main>
  )
}