【Next.js(App Router)+Supabase】`cookies` was called outside a request scope.を解決する

原因

公式ドキュメントにあるように動的APIがリクエストスコープの外で呼び出された際に発生します。

Why This Error Occurred
A Dynamic API was called outside a request scope. (Eg.: Global scope).

Note that Dynamic APIs could have been called deep inside other modules/functions (eg.: third-party libraries) that are not immediately visible.

Possible Ways to Fix It
Make sure that all Dynamic API calls happen in a request scope.

このエラーが発生した理由
動的APIがリクエストスコープの外で呼び出された。 (例: グローバルスコープ)

動的APIは、すぐには見えない他のモジュール/関数(例: サードパーティライブラリ)の奥深くで呼び出された可能性があることに注意してください。

可能な修正方法
すべての動的API呼び出しがリクエストスコープ内で行われるようにしてください。

今回のエラーメッセージではcookiesがリクエストスコープの外で呼び出されたことが原因となります。

`cookies` was called outside a request scope. Read more: https://nextjs.org/docs/messages/next-dynamic-api-wrong-context

解決方法

私の使い方は以下のようにコンポーネント定義の外でsupbase変数を定義したのでエラーとなってしまいました（createClient関数の中でcookies()を使っています）

const supabase = createClient()

export default async function Page() {
  const { data } = await supabase.from('hoge').select();
}

  return (
    ...
  )

正しくはコンポーネント定義の中でcreateClient()を呼び出すように修正します。
これで、リクエストコープ内で呼び出すようになり、エラーが解消されます。

- const supabase = createClient()

export default async function Page() {
+ const supabase = createClient()
  const { data } = await supabase.from('hoge').select();
}

  return (
    ...
  )

深掘り

エラーが起きるということは、cookies()は動的APIなんだろうなという理解はしつつも、どこかに書いていないかなと思ったら cookies()は動的関数である、リクエスト時に動的レンダリングへのルートが選択される と公式ドキュメントに記載がありました。
なので、cookies()は動的APIに当てはまるという理解をしました。

この辺りの理解が間違っていたらご指摘ください🙇