Next.js - having trouble setting up an onClick handler

Question

I was surprised when accessing react.dev saying that create-react-app is not any more suggested for a React application bootstrap.

All fine, the world changes, let's dig into Next.js for my first application...

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>
  )
}

Surprisingly I got the following error:

Unhandled Runtime Error
Error: alert is not defined

I understand that Next.js has server-side rendering, but I cannot understand why I cannot use a simple alert to popup a browsers message.

Seems that there are new concepts I should start learning...

Why is my alert an error on Next.js?

Why is my console.log showing not on the browser but on the console?

Answer 1

First, when setting the onClick, you are calling handleClick(). You should instead pass its reference:

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

As you did, the function is getting called while rendering the component on the server, the reason why you were getting that error. And after doing as above, you will get a new error saying:

If you need interactivity, consider converting part of this to a Client Component.

That's because, in the app directory, by default, Next.js uses Server Components, where the JSX gets compiled to "pure HTML" and sent to the browser, as you can read on the doc:

Server Components allow developers to better leverage server infrastructure. For example, large dependencies that previously would impact the JavaScript bundle size on the client can instead remain entirely on the server, leading to improved performance. They make writing a React application feel similar to PHP or Ruby on Rails, but with the power and flexibility of React for templating UI.

And a Server Component shouldn't contain client-specific code, for example, click handlers. If you need that, you should add "use client" at the top, to make it a Client Component:

"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>
  )
}