Next.js

Rekomendowane podejście dla App Routera to pakiet @supabase/ssr, który przechowuje sesję w ciasteczkach i działa w Server Components, Route Handlers i Server Actions.

Instalacja

npm install @supabase/supabase-js @supabase/ssr

Zmienne środowiskowe

# .env.local
NEXT_PUBLIC_SUPABASE_URL=https://abcdefghijklmnopqrst.host.ulewicz.space
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Nazwy zmiennych możesz zostawić takie jak w Supabase — migracja sprowadza się wtedy do podmiany wartości.

Klient przeglądarkowy

// lib/supabase/client.ts
import { createBrowserClient } from "@supabase/ssr";

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  );
}

Klient serwerowy

// lib/supabase/server.ts
import { createServerClient } from "@supabase/ssr";
import { cookies } from "next/headers";

export async function createClient() {
  const cookieStore = await cookies();
  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll: () => cookieStore.getAll(),
        setAll: (list) => {
          try {
            list.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options)
            );
          } catch {
            // wywołane z Server Component — odświeżanie sesji obsłuży proxy
          }
        },
      },
    }
  );
}

Pobieranie danych w Server Component

// app/todos/page.tsx
import { createClient } from "@/lib/supabase/server";

export default async function TodosPage() {
  const supabase = await createClient();
  const { data: todos } = await supabase.from("todos").select("id, task, done");
  return (
    <ul>
      {todos?.map((t) => <li key={t.id}>{t.task}</li>)}
    </ul>
  );
}

Odświeżanie sesji

W Next.js 16 middleware nazywa się proxy.ts. Utwórz go w katalogu głównym (lub src/) i wywołaj w nim supabase.auth.getUser(), aby odświeżać token przy każdym żądaniu — dokładnie tak jak w oficjalnym przewodniku Supabase dla @supabase/ssr.