CRITICALSecuritymediumNext.js + Supabase Standards

Never import server-only code in client components

Files with "use client" must never import server-only modules like database clients, API keys, or service role credentials.

Why This Matters

Importing server-only modules into client components leaks secrets (database credentials, API keys) into the browser JavaScript bundle. This is a security vulnerability.

Related Rules

Use route groups to organize app sections

Architecture

HIGH

Colocate page files with their route segment

Architecture

MEDIUM

Use (select auth.uid()) instead of auth.uid() in policies

Performance

MEDIUM

Use kebab-case for file and directory names

Quality

MEDIUM

Catch this automatically on every PR

BeforeMerge scans your pull requests against this rule and 2+ others. Get actionable feedback before code ships.

Join Waitlist Browse All Rules

Why This Matters

Next.js bundles all imports in "use client" files for the browser. If you import a database client, the connection string ends up in the client bundle — visible to anyone with browser DevTools.

Good

// lib/supabase/admin.ts
import "server-only"  // Prevents accidental client import
import { createClient } from "@supabase/supabase-js"
 
export const adminClient = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_ROLE_KEY!
)

Bad

// components/dashboard.tsx
"use client"
import { adminClient } from "@/lib/supabase/admin"  // LEAKED!

How to Fix

Add import "server-only" to all server-only modules
Next.js will throw a build error if a client component tries to import it

Never import server-only code in client components

Why This Matters

Tags

Related Rules

Catch this automatically on every PR

Why This Matters

Good

Bad

How to Fix