Next.js+Supabase项目出现Multiple GoTrueClient实例警告求助

问题原因 #

这个警告说明浏览器环境中存在多个Supabase GoTrueClient实例，虽不属于错误，但会因多个实例共享同一份本地存储键，在并发操作时可能引发认证状态不同步等未定义行为，核心问题是全局存在多份独立创建的Supabase客户端实例。

排查与修复步骤 #

1. 检查createBrowserSupabaseClient调用范围 #

全局搜索项目代码，确保仅在_app.tsx中调用createBrowserSupabaseClient创建实例，其他所有组件都通过useSupabaseClient()钩子获取实例，禁止自行调用createBrowserSupabaseClient创建新实例。

2. 确保_app.tsx中的实例为全局单例 #

你当前用useState(() => createBrowserSupabaseClient())创建实例，理论上useState的初始化函数仅执行一次，但Next.js开发模式热重载或特殊场景下可能出现重复创建。可改用以下两种方式确保单例：

方式一：将实例创建移至组件外部

// 放在_app.tsx文件最顶部（组件外部），确保全局仅创建一次
const supabaseClient = createBrowserSupabaseClient();

export default function App({
  Component,
  pageProps,
}: AppProps<{ initialSession: Session }>) {
  return (
    <>
      <style jsx global>
        {`
          :root {
            --font-inter: ${inter.style.fontFamily};
          }
        `}
      </style>
      <SessionContextProvider
        supabaseClient={supabaseClient}
        initialSession={pageProps.initialSession}
      >
        <ChakraProvider theme={theme}>
          <Layout>
            <Component {...pageProps} />
          </Layout>
        </ChakraProvider>
      </SessionContextProvider>
    </>
  );
}

方式二：用useMemo包裹实例创建

export default function App({
  Component,
  pageProps,
}: AppProps<{ initialSession: Session }>) {
  // 依赖为空数组，确保仅在组件首次渲染时创建实例
  const supabaseClient = useMemo(() => createBrowserSupabaseClient(), []);

  return (
    <>
      <style jsx global>
        {`
          :root {
            --font-inter: ${inter.style.fontFamily};
          }
        `}
      </style>
      <SessionContextProvider
        supabaseClient={supabaseClient}
        initialSession={pageProps.initialSession}
      >
        <ChakraProvider theme={theme}>
          <Layout>
            <Component {...pageProps} />
          </Layout>
        </ChakraProvider>
      </SessionContextProvider>
    </>
  );
}

3. 检查是否存在多层SessionContextProvider #

确认项目中没有在子组件或页面中再次嵌套SessionContextProvider，多余的嵌套会注入新的客户端实例，需移除重复的SessionContextProvider。

4. 验证修复效果 #

重启开发服务器，触发页面认证相关操作，查看控制台是否仍出现该警告。

内容的提问来源于stack exchange，提问作者maaajo