[Next.js] “async/await is not yet supported in Client Components, only Server Components.” というエラーが発生する時の解決方法

Next.js
投稿日:
カテゴリー Next.js/React

Next.jsのサーバーコンポーネントをクライアントコンポーネントに書き換えた時に、以下のエラーが発生しました。

Warning: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `’use client’` to a module that was originally written for the server.

警告: async/awaitはまだクライアント・コンポーネントではサポートされていません。このエラーは、本来サーバ用に書かれたモジュールに誤って `’use client’` を追加してしまった場合によく起こります。

広告

エラーの原因は、asyncの消し忘れでした。

修正前

'use client'
// ...
const myPage = async () => { // このasyncがエラーの原因
    // ...
    const myFunc = async () => { // このasyncは問題ない
        // ...
    }
    // ...
}

修正後

'use client'
// ...
const myPage = () => {
    // ...
    const myFunc = async () => {
        // ...
    }
    // ...
}

広告