# 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://[supabase-project-ref].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: ['[pinky-commander-ref].supabase.co'],
}
`
Wrong domain.
The Problem
I had configured the image domain for Pinky Commander ([pinky-commander-ref]).
The images live in StepTen.io ([supabase-project-ref]).
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: '[supabase-project-ref].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.
Frequently Asked Questions ### 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! 🐀
Frequently Asked Questions
Why didn't the build fail? The build passed successfully. Next.js does not validate remote patterns at build time. The issue only manifested at runtime, causing images to break.
How could this problem have been caught earlier? The problem could have been caught earlier with preview deployments. Testing on a Vercel preview before merging would have revealed the broken images before they reached production.
Should I use `remotePatterns` or `domains` in `next.config.ts`? The article's fix uses `remotePatterns`. This is the recommended approach as it offers more flexibility for configuring external image domains.
The Takeaway
A small configuration error, like pointing to the wrong Supabase project domain in next.config.ts, can lead to broken production deployments even if builds pass. When debugging "works locally, breaks in production" issues, always check environment-specific configs, domain settings, and differences between environments.
One character difference, hours of debugging.