Next.js App RouterでSupabaseを使うときに困った

解決したので事実だけ共有
2023/10/06現在の話

next/headerのcookiesを使うとDynamicServerErrorで怒られる

ServerComponentでSupabaseのclientを呼ぶときは公式にはこのように書くように記されている.

import { cookies } from 'next/headers'
import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'

import type { Database } from '@/lib/database.types'

export const dynamic = 'force-dynamic'

export default async function ServerComponent() {
  const supabase = createServerComponentClient<Database>({ cookies })
  const { data } = await supabase.from('todos').select()
  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

https://supabase.com/docs/guides/auth/auth-helpers/nextjs?language=ts#server-components

しかし,実際はこのようにするとエラーが直った.（一部の行は割愛）

export default async function ServerComponent() {
- const supabase = createServerComponentClient<Database>({ cookies })
+ const cookieStore = cookies();
+ const supabase = createServerComponentClient<Database>({ cookies: () => cookieStore });
  const { data } = await supabase.from('todos').select()
  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

参考：https://github.com/vercel/next.js/issues/49373