【Next 13】Unhandled Runtime Error というエラーの対処法について

はじめに

以下のようなエラーが表示されたので、その対処の記録です。

Unhandled Runtime Error
Error: Event handlers cannot be passed to Client Component props.
  <button disabled={false} type="button" className=... onClick={function}>
                                                               ^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.

DeepLで翻訳した文章も載せておきます。

結論

Next13からコンポーネントのレンダリングはデフォルトでサーバーサイドで行うようになったようです。

To make the transition to Server Components easier, all components inside the App Router are Server Components by default, including special files and colocated components. This allows you to automatically adopt them with no extra work, and achieve great performance out of the box. You can also optionally opt-in to Client Components using the ‘use client’ directive.

https://nextjs.org/docs/getting-started/react-essentials#why-server-components

なので、こちらにも記載があるように、ファイルに’use client’と明示する必要がありました。

このディレクティブを追記すればエラーは消えて表示されるようになりました。

（必要な方向け）もう少し、内容深掘り…。

ちなみに、筆者が書いていたコードは下記のようなものです。

import Image from "next/image";

export const CustomButton = () => {
  return (
    <button
      disabled={false}
      type={"button"}
      className={`custom-btn`}
      onClick={() => {}}
    ></button>
  );
};

onClickを押すとある関数が実行されるようなボタンコンポーネントを作成していました。

繰り返しになりますが、Next13ではデフォルトでサーバーサイドでレンダリングされるようになったため、クライアント側のコンポーネントにpropsを渡せずエラーになっているようです。

したがって、公式ドキュメントの記述のよう、次のように修正してあげるとうまくいきます。

"use client"; // 追記

import Image from "next/image";

export const CustomButton = () => {
  return (
    <button
      disabled={false}
      type={"button"}
      className={`custom-btn`}
      onClick={() => {}}
    ></button>
  );
};

こうすることで、このコンポーネントはクライアント側でレンダリングしてね、と明示的に伝えることができます。

終わりに

プライベートでは他にLaravelも勉強しています。LaravelもBreezeとかZodとかいいですよね！と思いますが、vs codeで書いていると文末のセミコロンをフォーマットしたときに自動補完とかしてくれないんですよね…。

その点、React/Nextは文末のセミコロンもフォーマット時に自動補完してくれるし、こちらの拡張機能をいれるとrafceってやるだけでコンポーネントの雛形がぱっとできたりするし、かゆいところに手が届きまくりでコードを書いているときの快適さが抜群ですよね…！！

ということで、やっぱり私はReact/Nextが書き心地いいなーと思っています。