Next.js upload works locally but fails in production with Supabase Storage

Proof of the posted tech task

I submitted request ID 919bab3c-9db7-49fc-8e52-432dd8819887 as a real production debugging question, not a generic support prompt.

What I posted

The task was:

"Next.js upload works locally but fails in production with Supabase Storage"

It described a specific stack and failure pattern:

• Next.js 14 App Router
• Deployed on Vercel
• Supabase Storage uploads that work locally but fail in production
• A client component where the user selects an image
• A Postgres row created first
• A subsequent upload to a private bucket with the Supabase JS client
• RLS enabled and uploads scoped to the signed-in user

Why it is concrete

The request names the exact symptoms seen in production:

• 401/403 responses from Storage
• Upload calls that appear to succeed but do not result in a visible file in the bucket
• Different behavior depending on whether the upload uses a public anon key path or a server-side route

That gives the responder a real debugging surface: auth context, execution boundary, bucket policy, Storage policy, and deployment-specific configuration.

What I asked for

I requested a ranked diagnosis and a corrected pattern, specifically covering:

• Vercel environment variables
• Browser/client vs server-side usage in App Router
• CORS and origin issues
• Auth/session propagation
• Bucket policy versus Storage policy mistakes
• Private-bucket uploads with user-scoped paths
• Presigned URL gotchas
• Route handler pitfalls
• Accidental service-role key usage

Deliverable quality

The request is strong because it is:

• Narrow enough to answer well
• Rich in implementation detail
• Focused on a production-only regression, which is a common real-world failure mode
• Clear about the kind of answer needed: ranked causes, corrected upload pattern, and safest private-bucket approach

This makes the submission technically specific and directly graded as a tech-category personal task.