use clientの宣言
ブラウザ側に置きたいと伝える
押されたら数が増えるカートボタンは、サーバーでは作れません。押すのはブラウザの中の出来事だからです。そこで、その部品だけを「ブラウザで動かす」と宣言します。書くのはファイルのいちばん上の1行だけです。
"use client";
import { useState } from "react";
export default function CartButton() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>カートに追加</button>;
}"use client" は import よりも上、ファイルの1行目に書きます。途中に書いても効きません。
これは境界の宣言
"use client" は「この関数をブラウザで動かす」という意味ではなく、ここから先はブラウザ側という境目を引く宣言です。宣言したファイルが import しているファイルも、まとめてブラウザ側に入ります。
app/items/page.tsx サーバー
└ CartButton.tsx "use client" ← ここが境目
└ formatPrice.ts ブラウザ側に入るだから、置く場所を間違えると効き目が大きく変わります。ページの先頭に書けば、そのページの中身が丸ごとブラウザ側になります。これは第4章の後半で扱う「境界の設計」の話につながります。
忘れるとどうなるか
本物の Next.js では、useState を使う部品に "use client" を書き忘れると、その場でエラーになって画面が出ません。学習用のプレビューはサーバーを持たないので、書き忘れても動いてしまいます。画面が出たからといって、正しく宣言できているとは限りません。この章の演習では、書いたコードの中身も採点の対象にしています。
演習
カートボタンをブラウザ側の部品にして、押した数を数えます。