【Next.js】Supabaseのフェッチでrevalidateを使う

はじめに

Supabaseはデフォルトでcross-fetchだったため、
revalidatePathを使ってもうまく動きませんでした。

そこで、カスタムフェッチをして、revalidateできるようにしようと思います。

今回の元となるコード

参考：Supabase × Next.js

server.ts

  import { createServerClient, type CookieOptions } from '@supabase/ssr'
  import { cookies } from 'next/headers'

  export function createClient() {
    const cookieStore = cookies()

    return createServerClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
      {
        cookies: {...},
      }
    )
  }

解決方法

createServerClient.global.fetchに自作のfetchを書いて渡すことができます。
そこに、revalidateを設定したfetchを用意してあげます。

今回渡すcustom fetch関数

server.ts

  const customFetch = (...args: Parameters<typeof fetch>) => {
    const [input, option] = args; //input = supabaseのURL
    return fetch(input, {
      ...option,
      next: {
        revalidate: 3600,
      },
    });

作ったcustom fetch関数を渡してあげる

以下のように、global.fetchに作ったものを渡してあげることで
revalidate: 3600が設定された状態でSupabaseのデータをfetchすることができます。

server.ts

  import { createServerClient, type CookieOptions } from '@supabase/ssr'
  import { cookies } from 'next/headers'

  export function createClient() {
    const cookieStore = cookies()

    return createServerClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
      {
        global: {
          fetch: customFetch
        }
        cookies: {...},
      }
    )
  }

おわりに

デフォルトがcross-fetchということを知らずかなりの時間を割いてしまっていました。
参考になればうれしいです。

少し手を加えることでtagsを設定することもできると思うので試してみてください。