e28d03c5a4
This PR introduces a new experimental component, `next/future/image`, which is inspired by the existing experimental `layout="raw"`. The difference is that much of the code has been deleted in order to reduce client-side code as well as reduce complexity: - No `layout` prop - No `loader` config (although `loader` prop works) - No `IntersectionObserver`, use native `loading="lazy"` - No `lazyBoundary` - No `lazyRoot` - No `fill` (yet) so width & height are required - No `objectFit` (use `style` instead) - No `objectPosition` (use `style` instead) This improves performance because native `loading="lazy"` doesn't need to wait for React Hydration and client-side JS. In a future PR, we will modify `next/image` to remove `layout="raw"` since this new component supersedes it. ## Feature - [x] Integration tests added - [x] Documentation added - [x] Telemetry added. In case of a feature if it's used or not. - [x] Errors have helpful link attached, see `contributing.md`
1.7 KiB
1.7 KiB
Invalid images config
Why This Error Occurred
In your next.config.js file you provided an invalid config for the images field.
Possible Ways to Fix It
Make sure your images field follows the allowed config shape and values:
module.exports = {
images: {
// limit of 25 deviceSizes values
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
// limit of 25 imageSizes values
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
// limit of 50 domains values
domains: [],
// path prefix for Image Optimization API, useful with `loader`
path: '/_next/image',
// loader can be 'default', 'imgix', 'cloudinary', 'akamai', or 'custom'
loader: 'default',
// disable static imports for image files
disableStaticImages: false,
// minimumCacheTTL is in seconds, must be integer 0 or more
minimumCacheTTL: 60,
// ordered list of acceptable optimized image formats (mime types)
formats: ['image/webp'],
// enable dangerous use of SVG images
dangerouslyAllowSVG: false,
// set the Content-Security-Policy header
contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
// the following are experimental features, and may cause breaking changes
},
experimental: {
images: {
// limit of 50 objects
remotePatterns: [],
// when true, every image will be unoptimized
unoptimized: false,
// when true, allow `next/future/image` to be imported
allowFutureImage: false,
},
},
}