My images were fine until I used Next.js's `<Image>` component, which immediately threw errors. I realized this wasn't just a config issue, but a security measure to protect server resources. I explain how to configure `remotePatterns` and dive deep into how Next.js Image Optimization works under the hood.
A comprehensive deep dive into client-side storage. From Cookies to IndexedDB and the Cache API. We explore security best practices for JWT storage (XSS vs CSRF), performance implications of synchronous APIs, and how to build offline-first applications using Service Workers.
Class is there, but style is missing? Debugging Tailwind CSS like a detective.
Think Android is easier than iOS? Meet Gradle Hell. Learn to fix minSdkVersion conflicts, Multidex limit errors, Namespace issues in Gradle 8.0, and master dependency analysis with `./gradlew dependencies`.
App crashes only in Release mode? It's likely ProGuard/R8. Learn how to debug obfuscated stack traces, use `@Keep` annotations, and analyze `usage.txt`.
remotePatterns, but it still fails.Did you restart the server? Changes in next.config.js are NOT hot-reloaded. You must stop (Ctrl+C) and start (npm run dev) again.
Technically yes, but don't do it.
remotePatterns: [{ protocol: 'https', hostname: '**' }]
This opens your server to being an Open Proxy. Anyone can use your server to download any file from the internet, hiding their IP address.
If users upload images to S3, the keys (filenames) are unpredictable. Allows the bucket domain, but restrict the path if possible:
{
protocol: 'https',
hostname: 'my-bucket.s3.amazonaws.com',
pathname: '/user-uploads/**',
}
Use style={{ objectFit: 'cover' }} combined with fill prop if you don't know the exact dimensions.
If you know dimensions, always provide width and height props to prevent layout shift.
Next.js automatically serves AVIF to browsers that support it (Chrome, Firefox) and falls back to WebP or JPEG for older ones.
AVIF offers superior compression (20% smaller than WebP) but takes longer to generate. If your build times are too slow, you can disable AVIF in next.config.js:
images: { formats: ['image/webp'] }
If remotePatterns looks correct but you still get errors, check if the image server (e.g., S3) blocks "hotlinking".
Next.js fetches the image from the server side. If your S3 bucket policy blocks requests that don't come from a browser (no Referer header), the optimization will fail. You may need to update your S3 Bucket Policy to allow access from your Next.js server's IP or User-Agent.