【エラー解決ログ】Next.jsでuseStateが使えない

初学者のため、何か間違いがございましたらご指摘ください。

直面したエラー

  × You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
  │ Learn more: https://nextjs.org/docs/getting-started/react-essentials

実際のコード

page.tsx

import Link from "next/link";
import { useState } from "react";

export default function CreatePage() {
  const [text, setText] = useState("");
  return (
    <div>
      <p>入力ページ</p>
      <p>フォーム</p>
      <form>
        <input
          type="text"
          id="text"
          name="text"
          value={text}
          onChange={(e) => setText(e.target.value)}
        />
        <button type="submit">Submit</button>
      </form>
      <Link href="/">ホームページへ</Link>
    </div>
  );
}

解決策

一行目に"use client";を追記する。

エラーになっていた原因

page.tsxはデフォルトではサーバーコンポーネントだが、useStateやuseEffectなどのフックはクライアントコンポーネントでないと利用できない。
そのため、"use client";を追記することで、このコンポーネントをクライアントサイドでレンダリングするということを指定する必要があった。