Skip to content

Next.js 16: createBrowserClient() used Math.random() inside a Client Component without a Suspense boundary above it #1846

@Jasonkoolman

Description

@Jasonkoolman

Bug report

  • I confirm this is a bug with Supabase, not with my own application.
  • I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

@supabase/ssr’s createBrowserClient internally pulls in @supabase/auth-js, which calls Math.random() during startup to generate a UUID. In Next.js 16 App Router, Server Components must remain deterministic until they’ve read an uncached data source; touching Math.random() before that triggers the new runtime guard. The moment I import the client inside a Server Component (or a non-cached shared component like the site header), the app fails at build/runtime with:

Route "/" used `Math.random()` before accessing either uncached data ... See more info here:
https://nextjs.org/docs/messages/next-prerender-random
.../node_modules/@supabase/auth-js/src/lib/helpers.ts (14:21)

This happens even if I never issue a query—the act of instantiating the client is enough.

To Reproduce

  1. Create a fresh Next.js 16 (App Router, Cache Components) project and install @supabase/ssr 0.7.0 (or current).

  2. Add a file lib/supabase-client.ts:

    import { createBrowserClient } from "@supabase/ssr";
    import type { Database } from "./types";
    
    export const supabase = createBrowserClient<Database>(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!
    );
  3. Import that module from any Server Component that renders on /, e.g. a shared header:

    // app/components/header.tsx
    "use client";
    
    import { supabase } from "@/lib/supabase-client";
    
    export function Header() {
      // no queries needed – just referencing the client triggers the guard
      return <div>Header</div>;
    }
  4. Run pnpm dev (or build). The dev overlay shows the Math.random() error coming from @supabase/auth-js.

Expected behavior

Instantiating a Supabase browser client in a Server Component should not break deterministic rendering in Next.js 16.

Screenshots

Image

System information

  • OS: Windows
  • Versions: using latest versions of next (16) @supabase/ssr, @supabase/supabase-js and @supabase/postgrests-js.
  • Version of Node.js: v22

Additional context

Related issue: https://www.answeroverflow.com/m/1432792611617247435

Metadata

Metadata

Assignees

No one assigned

    Labels

    auth-jsRelated to the auth-js library.bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions