nextjs/no-async-client-component 正しさ

何ができるか

Next.js アプリケーションにおいて、クライアントコンポーネントに非同期関数の使用を禁止します。
このルールは以下の条件を満たすすべての非同期関数をチェックします：

「use client」ディレクティブが付与されている
大文字で始まる名前を持つ（コンポーネントであることを示す）
デフォルトとしてエクスポートされているか、変数に代入されている

なぜ問題なのか

クライアントコンポーネントに非同期関数を使用すると、サーバーとクライアント間でハイドレーションの不一致が発生し、
コンポーネントのレンダリングライフサイクルが破壊され、React の並行処理機能との間に予期しない動作が生じる可能性があります。

例

このルールに対する誤ったコードの例：

javascript

"use client"

// デフォルトエクスポートの非同期コンポーネント
export default async function MyComponent() {
  return <></>
}

// 名前付きエクスポートの非同期コンポーネント
async function MyComponent() {
  return <></>
}
export default MyComponent

// 非同期アロー関数コンポーネント
const MyComponent = async () => {
  return <></>
}
export default MyComponent

このルールに対する正しいコードの例：

javascript

"use client"

// 通常の同期コンポーネント
export default function MyComponent() {
  return <></>
}

// エフェクト内で非同期処理を扱う
export default function MyComponent() {
  useEffect(() => {
    async function fetchData() {
      // 非同期操作をここに記述
    }
    fetchData();
  }, []);
  return <></>
}

// イベントハンドラ内で非同期処理を扱う
export default function MyComponent() {
  const handleClick = async () => {
    // 非同期操作をここに記述
  }
  return <button onClick={handleClick}>クリックしてください</button>
}

使い方

このルールを設定ファイルまたは CLI で有効化するには、以下のように使用できます：

Config (.oxlintrc.json)CLI

json

{
  "plugins": ["nextjs"],
  "rules": {
    "nextjs/no-async-client-component": "error"
  }
}

bash

oxlint --deny nextjs/no-async-client-component --nextjs-plugin

参照

ルールのソース

何ができるか ​

なぜ問題なのか ​

例 ​

使い方 ​

参照 ​

何ができるか

なぜ問題なのか

例

使い方

参照