Next.js App Router

サーバーコンポーネント vs クライアントコンポーネント

デフォルトではサーバーコンポーネントを使用してください。 以下の場合のみ 'use client' を追加します:

• イベントハンドラー (onClick、onChange、onSubmit)
• ブラウザAPI (localStorage、window、navigator)
• Reactフック (useState、useEffect、useRef)
• サードパーティのクライアントライブラリ

// サーバーコンポーネント (デフォルト) - ディレクティブは不要
export default async function Page() {
  const data = await fetchData(); // Direct async/await
  return <div>{data.title}</div>;
}

// クライアントコンポーネント - 明示的なディレクティブ
'use client';
import { useState } from 'react';
export default function Counter() {
  const [count, setCount] = useState(0);
  retu

...