use clientの宣言｜基礎を学ぶ

Next.jsフルスタック：サーバー・データ取得・API

Server ComponentsとClient Components、use client、サーバーfetch、asyncコンポーネント、動的ルート、params、notFound、キャッシュ、Route Handler、GET・POST API、Server Actions、フォームを扱う全24レッスンのフルスタックコースです。fleamaの商品取得と出品機能をNext.js内へ実装します。

ブラウザ側に置きたいと伝える

押されたら数が増えるカートボタンは、サーバーでは作れません。押すのはブラウザの中の出来事だからです。そこで、その部品だけを「ブラウザで動かす」と宣言します。書くのはファイルのいちばん上の1行だけです。

TypeScript (JSX)

"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" を書き忘れると、その場でエラーになって画面が出ません。学習用のプレビューはサーバーを持たないので、書き忘れても動いてしまいます。画面が出たからといって、正しく宣言できているとは限りません。この章の演習では、書いたコードの中身も採点の対象にしています。

演習

カートボタンをブラウザ側の部品にして、押した数を数えます。

Next.jsフルスタック：サーバー・データ取得・API

ブラウザ側に置きたいと伝える

TypeScript (JSX)

"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行目に書きます。途中に書いても効きません。

これは境界の宣言

プレーンテキスト

app/items/page.tsx        サーバー
  └ CartButton.tsx        "use client"  ← ここが境目
      └ formatPrice.ts    ブラウザ側に入る

忘れるとどうなるか

use clientの宣言

ブラウザ側に置きたいと伝える

これは境界の宣言

忘れるとどうなるか

演習

ヒント

use clientの宣言

ブラウザ側に置きたいと伝える

これは境界の宣言

忘れるとどうなるか

演習

ヒント