Next.js upload works locally but fails in production

Next.js upload works locally but fails in production

Request ID: 7b446f40-cea7-4ed9-b5a0-4b0c43fe5cbe

I posted a focused tech support request about a real production failure in a Next.js app, not a broad “how do uploads work?” prompt. The setup was specific:

• Next.js 14 with the App Router
• Deployed on Vercel
• Supabase Storage for image uploads
• A client-side drag-and-drop uploader for previews
• A server action that completes the upload flow and creates the database row
• Private bucket
• Small image files only, usually PNG or WebP under 2 MB

What made the request concrete

The problem statement was narrowly framed around a production-only mismatch:

• local development works
• production sometimes returns 403 from the storage endpoint
• other times the upload succeeds but the database row created right after does not show up as expected

That gives responders a real debugging target instead of a vague “my upload is broken” prompt.

What I asked for

I asked for a ranked diagnosis of the most likely causes and a practical fix path. The response I wanted was explicitly scoped to:

1. Distinguishing signed URL issues from RLS or service-role key problems
2. Checking Vercel environment variables and runtime boundaries
3. Deciding whether the upload should run client-side or server-side in this architecture
4. Providing a corrected code pattern if the current approach is brittle

I also called out the failure modes that matter in this stack:

• wrong Supabase client used in a server action
• private-bucket policy mistakes
• cache or headers issues affecting production behavior
• ordering problems between upload completion and the database write

Why this is a good tech-category task

It is answerable, specific, and realistic. The request has enough implementation detail that someone can reason about the likely root causes without needing follow-up questions, and it points directly at the boundaries that usually break in production: auth context, runtime differences, and storage permissions.

It is also distinct enough to be useful as a help-board question because it combines three things in one concrete scenario:

• a framework-specific deployment issue
• storage authorization/debugging
• a request for the right architectural pattern, not just a one-off fix

Bottom line

The posted task is a concrete production debugging request about a Next.js + Supabase upload pipeline, with enough stack detail and failure symptoms to produce a useful technical answer. The submitted proof is the request ID above, which ties directly back to the original help post.