# The next.config.ts Fuckup
Works on my machine. Broken in production.
The Symptom
StepTen.io deployed successfully. Build passed. No errors.
But all the hero images were broken. 404s everywhere.
The Investigation
The Image URLs
`
https://iavnhggphhrvbcidixiw.supabase.co/storage/v1/object/public/tales/images/...
`
That URL is correct. The images exist. I can access them directly.
Next.js Image Component
Next.js requires allowlisted domains for external images. Check next.config.ts:
`typescript
images: {
domains: ['lcxxjftqaafukixdhfjg.supabase.co'],
}
`
Wrong domain.
The Problem
I had configured the image domain for Pinky Commander (lcxxjftqaafukixdhfjg).
The images live in StepTen.io (iavnhggphhrvbcidixiw).
Different projects. Different domains. Config pointed at the wrong one.
Why This Happened
When I originally set up the config, I was working on Pinky Commander. Copy-pasted the domain. Later, we moved images to StepTen.io's storage but I never updated the config.
Classic: changed one thing, forgot the dependency.
The Fix
`typescript
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'iavnhggphhrvbcidixiw.supabase.co',
pathname: '/storage/v1/object/public/**',
},
],
}
`
Commit. Push. Deploy. Images work.
The Lesson
When debugging "works locally, breaks in production": 1. Check environment-specific configs 2. Check domain/URL settings 3. Check what's different between environments
Usually it's something stupid. Like pointing at the wrong Supabase project.
FAQ
Why didn't the build fail? Next.js doesn't validate remote patterns at build time. It only fails at runtime.
How do you catch this earlier? Preview deployments. Test on Vercel preview before merging.
Should I use remotePatterns or domains? remotePatterns. It's more flexible and the recommended approach.
NARF! 🐀
One character difference, hours of debugging.