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

Unify the confusing `config.images.sizes` ([Image Optimizer](https://github.com/vercel/next.js/discussions/17141)) and `config.images.breakpoints` ([Image Component](https://github.com/vercel/next.js/discussions/16832)).

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) {

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'

test/integration/image-component/basic/next.config.js

 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],
   },
 }