Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// next.config.js — image configuration
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    // Control output formats (default includes webp)
    formats: ['image/avif', 'image/webp'],

// Custom device sizes for responsive images
    deviceSizes: [640, 750, 828, 1080, 1200, 1920],

// Custom image sizes for fixed-width images
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],

// Minimum cache TTL in seconds (default: 60)
    minimumCacheTTL: 86400, // 24 hours

remotePatterns: [
      { protocol: 'https', hostname: 'images.unsplash.com' },
    ],
  },
};
module.exports = nextConfig;

// Remote image with manual blurDataURL
import Image from 'next/image';

interface BlogPost {
  title: string;
  coverImage: string;
  blurHash: string; // tiny base64 JPEG from your API
}

export default function BlogCover({ post }: { post: BlogPost }) {
  return (
    <div className="relative w-full h-64">
      <Image
        src={post.coverImage}
        alt={post.title}
        fill
        quality={65}
        placeholder="blur"
        blurDataURL={post.blurHash}
        sizes="(max-width: 768px) 100vw, 800px"
        className="object-cover"
        priority
      />
    </div>
  );
}