Unify config.image.breakpoints to config.image.sizes (#17953)

Unify the confusing `config.images.sizes` ([Image Optimizer](#17141)) and `config.images.breakpoints` ([Image Component](#16832)).
vercel · Oct 16, 2020 · 6f13956 · 6f13956
1 parent 5f7c6ae
commit 6f13956
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
@@ -27,7 +27,7 @@ type ImageProps = {
 }
 
 let imageData: any = process.env.__NEXT_IMAGE_OPTS
-const breakpoints = imageData.breakpoints || [640, 1024, 1600]
+const breakpoints = imageData.sizes || [640, 1024, 1600]
 
 function computeSrc(src: string, host: string, unoptimized: boolean): string {
   if (unoptimized) {

diff --git a/test/integration/image-component/bad-next-config/test/index.test.js b/test/integration/image-component/bad-next-config/test/index.test.js
@@ -16,13 +16,13 @@ describe('Next.config.js images prop without default host', () => {
       nextConfig,
       `module.exports = {
         images: {
+          sizes: [480, 1024, 1600],
           hosts: {
             secondary: {
               path: 'https://examplesecondary.com/images/',
               loader: 'cloudinary',
             },
           },
-          breakpoints: [480, 1024, 1600],
         },
       }`,
       'utf8'
@@ -46,6 +46,7 @@ describe('Next.config.js images prop without path', () => {
       nextConfig,
       `module.exports = {
         images: {
+          sizes: [480, 1024, 1600],
           hosts: {
             default: {
               path: 'https://examplesecondary.com/images/',
@@ -55,7 +56,6 @@ describe('Next.config.js images prop without path', () => {
               loader: 'cloudinary',
             },
           },
-          breakpoints: [480, 1024, 1600],
         },
       }`,
       'utf8'

diff --git a/test/integration/image-component/basic/next.config.js b/test/integration/image-component/basic/next.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   images: {
+    sizes: [480, 1024, 1600],
     hosts: {
       default: {
         path: 'https://example.com/myaccount/',
@@ -10,6 +11,5 @@ module.exports = {
         loader: 'cloudinary',
       },
     },
-    breakpoints: [480, 1024, 1600],
   },
 }