From 43a7fc3176ab1028c66b432bd52564e026c5e9b1 Mon Sep 17 00:00:00 2001 From: Michael Novotny Date: Wed, 1 Mar 2023 11:57:48 -0600 Subject: [PATCH 1/6] Updates `next/image` eslint message to denote that costs may be incurred. --- .../src/rules/no-img-element.ts | 2 +- test/integration/eslint/test/index.test.js | 20 +++++++++---------- .../eslint-plugin-next/no-img-element.test.ts | 8 +++----- 3 files changed, 14 insertions(+), 16 deletions(-) diff --git a/packages/eslint-plugin-next/src/rules/no-img-element.ts b/packages/eslint-plugin-next/src/rules/no-img-element.ts index 4e4aa8cbe7f3a..085a4e90a6242 100644 --- a/packages/eslint-plugin-next/src/rules/no-img-element.ts +++ b/packages/eslint-plugin-next/src/rules/no-img-element.ts @@ -31,7 +31,7 @@ export = defineRule({ context.report({ node, - message: `Using \`\` could result in slower LCP and higher bandwidth. Use \`\` from \`next/image\` instead to utilize Image Optimization. See: ${url}`, + message: `Using \`\` could result in slower LCP and higher bandwidth due to image sizes. Consider using \`\` from \`next/image\` to automatically optimize images. Note: when self-hosting, Image Optimization runs on your Next.js server. If using an external loader, additional usage or cost could be incurred, depending on your provider. See: ${url}`, }) }, } diff --git a/test/integration/eslint/test/index.test.js b/test/integration/eslint/test/index.test.js index 4d0ab0e250978..76c66bde611c0 100644 --- a/test/integration/eslint/test/index.test.js +++ b/test/integration/eslint/test/index.test.js @@ -105,7 +105,7 @@ describe('ESLint', () => { 'Error: `next/head` should not be imported in `pages/_document.js`. Use `` from `next/document` instead' ) expect(output).toContain( - 'Warning: Using `` could result in slower LCP and higher bandwidth. Use `` from `next/image` instead to utilize Image Optimization.' + 'Warning: `Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images.' ) expect(output).toContain('Warning: Do not include stylesheets manually') expect(output).toContain( @@ -143,7 +143,7 @@ describe('ESLint', () => { 'Error: `next/head` should not be imported in `pages/_document.js`. Use `` from `next/document` instead' ) expect(output).toContain( - 'Warning: Using `` could result in slower LCP and higher bandwidth. Use `` from `next/image` instead to utilize Image Optimization.' + 'Warning: Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images.' ) expect(output).toContain('Warning: Do not include stylesheets manually') expect(output).toContain( @@ -417,7 +417,7 @@ describe('ESLint', () => { 'Error: `next/head` should not be imported in `pages/_document.js`. Use `` from `next/document` instead' ) expect(output).toContain( - 'Warning: Using `` could result in slower LCP and higher bandwidth. Use `` from `next/image` instead to utilize Image Optimization.' + 'Warning: `Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images.' ) expect(output).toContain('Warning: Do not include stylesheets manually') expect(output).toContain( @@ -453,7 +453,7 @@ describe('ESLint', () => { 'Error: `next/head` should not be imported in `pages/_document.js`. Use `` from `next/document` instead' ) expect(output).toContain( - 'Warning: Using `` could result in slower LCP and higher bandwidth. Use `` from `next/image` instead to utilize Image Optimization.' + 'Warning: `Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images.' ) expect(output).toContain('Warning: Do not include stylesheets manually') expect(output).toContain( @@ -479,7 +479,7 @@ describe('ESLint', () => { const output = stdout + stderr expect(output).toContain( - 'Warning: Using `` could result in slower LCP and higher bandwidth. Use `` from `next/image` instead to utilize Image Optimization.' + 'Warning: `Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images.' ) expect(output).toContain('Error: Synchronous scripts should not be used.') }) @@ -515,7 +515,7 @@ describe('ESLint', () => { const output = stdout + stderr expect(output).toContain( - 'Warning: Using `` could result in slower LCP and higher bandwidth. Use `` from `next/image` instead to utilize Image Optimization.' + 'Warning: `Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images.' ) expect(output).toContain('Error: Synchronous scripts should not be used.') }) @@ -788,7 +788,7 @@ describe('ESLint', () => { expect(output).toContain('pages/bar.js') expect(output).toContain( - 'Warning: Using `` could result in slower LCP and higher bandwidth. Use `` from `next/image` instead to utilize Image Optimization.' + 'Warning: `Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images.' ) expect(output).not.toContain('pages/index.js') @@ -833,7 +833,7 @@ describe('ESLint', () => { }), expect.objectContaining({ message: - 'Using `` could result in slower LCP and higher bandwidth. Use `` from `next/image` instead to utilize Image Optimization. See: https://nextjs.org/docs/messages/no-img-element', + 'Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images. Note: when self-hosting, Image Optimization runs on your Next.js server. If using an external loader, additional usage or cost could be incurred, depending on your provider. See: https://nextjs.org/docs/messages/no-img-element', }), ]) ) @@ -872,7 +872,7 @@ describe('ESLint', () => { 'img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.' ) expect(fileOutput).toContain( - 'Using `` could result in slower LCP and higher bandwidth. Use `` from `next/image` instead to utilize Image Optimization. See: https://nextjs.org/docs/messages/no-img-element' + 'Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images. Note: when self-hosting, Image Optimization runs on your Next.js server. If using an external loader, additional usage or cost could be incurred, depending on your provider. See: https://nextjs.org/docs/messages/no-img-element' ) expect(fileOutput).toContain('file-linting/pages/index.js') @@ -912,7 +912,7 @@ describe('ESLint', () => { 'img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.' ) expect(output).toContain( - 'Using `` could result in slower LCP and higher bandwidth. Use `` from `next/image` instead to utilize Image Optimization. See: https://nextjs.org/docs/messages/no-img-element' + 'Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images. Note: when self-hosting, Image Optimization runs on your Next.js server. If using an external loader, additional usage or cost could be incurred, depending on your provider. See: https://nextjs.org/docs/messages/no-img-element' ) expect(output).toContain('pages/index.cjs') diff --git a/test/unit/eslint-plugin-next/no-img-element.test.ts b/test/unit/eslint-plugin-next/no-img-element.test.ts index 9f46744d1af4c..024f8954da061 100644 --- a/test/unit/eslint-plugin-next/no-img-element.test.ts +++ b/test/unit/eslint-plugin-next/no-img-element.test.ts @@ -81,8 +81,7 @@ ruleTester.run('no-img-element', rule, { errors: [ { message: - 'Using `` could result in slower LCP and higher bandwidth. Use `` from `next/image` instead to utilize Image Optimization. ' + - 'See: https://nextjs.org/docs/messages/no-img-element', + 'Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images. Note: when self-hosting, Image Optimization runs on your Next.js server. If using an external loader, additional usage or cost could be incurred, depending on your provider. See: https://nextjs.org/docs/messages/no-img-element', type: 'JSXOpeningElement', }, ], @@ -92,7 +91,7 @@ ruleTester.run('no-img-element', rule, { export class MyComponent { render() { return ( - Test picture` could result in slower LCP and higher bandwidth. Use `` from `next/image` instead to utilize Image Optimization. ' + - 'See: https://nextjs.org/docs/messages/no-img-element', + 'Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images. Note: when self-hosting, Image Optimization runs on your Next.js server. If using an external loader, additional usage or cost could be incurred, depending on your provider. See: https://nextjs.org/docs/messages/no-img-element', type: 'JSXOpeningElement', }, ], From bc5cb0abf4bd637dc7e1516cd34816d7029fc119 Mon Sep 17 00:00:00 2001 From: Michael Novotny Date: Wed, 1 Mar 2023 12:04:53 -0600 Subject: [PATCH 2/6] Removes rogue backtick. --- test/integration/eslint/test/index.test.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/test/integration/eslint/test/index.test.js b/test/integration/eslint/test/index.test.js index 76c66bde611c0..1cfc9fa0fca1f 100644 --- a/test/integration/eslint/test/index.test.js +++ b/test/integration/eslint/test/index.test.js @@ -105,7 +105,7 @@ describe('ESLint', () => { 'Error: `next/head` should not be imported in `pages/_document.js`. Use `` from `next/document` instead' ) expect(output).toContain( - 'Warning: `Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images.' + 'Warning: Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images.' ) expect(output).toContain('Warning: Do not include stylesheets manually') expect(output).toContain( @@ -417,7 +417,7 @@ describe('ESLint', () => { 'Error: `next/head` should not be imported in `pages/_document.js`. Use `` from `next/document` instead' ) expect(output).toContain( - 'Warning: `Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images.' + 'Warning: Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images.' ) expect(output).toContain('Warning: Do not include stylesheets manually') expect(output).toContain( @@ -453,7 +453,7 @@ describe('ESLint', () => { 'Error: `next/head` should not be imported in `pages/_document.js`. Use `` from `next/document` instead' ) expect(output).toContain( - 'Warning: `Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images.' + 'Warning: Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images.' ) expect(output).toContain('Warning: Do not include stylesheets manually') expect(output).toContain( @@ -479,7 +479,7 @@ describe('ESLint', () => { const output = stdout + stderr expect(output).toContain( - 'Warning: `Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images.' + 'Warning: Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images.' ) expect(output).toContain('Error: Synchronous scripts should not be used.') }) @@ -515,7 +515,7 @@ describe('ESLint', () => { const output = stdout + stderr expect(output).toContain( - 'Warning: `Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images.' + 'Warning: Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images.' ) expect(output).toContain('Error: Synchronous scripts should not be used.') }) @@ -788,7 +788,7 @@ describe('ESLint', () => { expect(output).toContain('pages/bar.js') expect(output).toContain( - 'Warning: `Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images.' + 'Warning: Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images.' ) expect(output).not.toContain('pages/index.js') From 1edba22bf5f72e16d110fb18d615618cadac333e Mon Sep 17 00:00:00 2001 From: Michael Novotny Date: Wed, 1 Mar 2023 12:31:49 -0600 Subject: [PATCH 3/6] Updates message. --- .../src/rules/no-img-element.ts | 2 +- test/integration/eslint/test/index.test.js | 20 +++++++++---------- .../eslint-plugin-next/no-img-element.test.ts | 4 ++-- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/eslint-plugin-next/src/rules/no-img-element.ts b/packages/eslint-plugin-next/src/rules/no-img-element.ts index 085a4e90a6242..87f93a94a658a 100644 --- a/packages/eslint-plugin-next/src/rules/no-img-element.ts +++ b/packages/eslint-plugin-next/src/rules/no-img-element.ts @@ -31,7 +31,7 @@ export = defineRule({ context.report({ node, - message: `Using \`\` could result in slower LCP and higher bandwidth due to image sizes. Consider using \`\` from \`next/image\` to automatically optimize images. Note: when self-hosting, Image Optimization runs on your Next.js server. If using an external loader, additional usage or cost could be incurred, depending on your provider. See: ${url}`, + message: `Using \`\` could result in slower LCP and higher bandwidth. Consider using \`\` from \`next/image\` to automatically optimize images. Note: check your provider's pricing of bandwidth and image optimization to see how this may impact your bill. See: ${url}`, }) }, } diff --git a/test/integration/eslint/test/index.test.js b/test/integration/eslint/test/index.test.js index 1cfc9fa0fca1f..0710ad13fa77d 100644 --- a/test/integration/eslint/test/index.test.js +++ b/test/integration/eslint/test/index.test.js @@ -105,7 +105,7 @@ describe('ESLint', () => { 'Error: `next/head` should not be imported in `pages/_document.js`. Use `` from `next/document` instead' ) expect(output).toContain( - 'Warning: Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images.' + 'Warning: Using `` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images.' ) expect(output).toContain('Warning: Do not include stylesheets manually') expect(output).toContain( @@ -143,7 +143,7 @@ describe('ESLint', () => { 'Error: `next/head` should not be imported in `pages/_document.js`. Use `` from `next/document` instead' ) expect(output).toContain( - 'Warning: Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images.' + 'Warning: Using `` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images.' ) expect(output).toContain('Warning: Do not include stylesheets manually') expect(output).toContain( @@ -417,7 +417,7 @@ describe('ESLint', () => { 'Error: `next/head` should not be imported in `pages/_document.js`. Use `` from `next/document` instead' ) expect(output).toContain( - 'Warning: Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images.' + 'Warning: Using `` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images.' ) expect(output).toContain('Warning: Do not include stylesheets manually') expect(output).toContain( @@ -453,7 +453,7 @@ describe('ESLint', () => { 'Error: `next/head` should not be imported in `pages/_document.js`. Use `` from `next/document` instead' ) expect(output).toContain( - 'Warning: Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images.' + 'Warning: Using `` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images.' ) expect(output).toContain('Warning: Do not include stylesheets manually') expect(output).toContain( @@ -479,7 +479,7 @@ describe('ESLint', () => { const output = stdout + stderr expect(output).toContain( - 'Warning: Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images.' + 'Warning: Using `` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images.' ) expect(output).toContain('Error: Synchronous scripts should not be used.') }) @@ -515,7 +515,7 @@ describe('ESLint', () => { const output = stdout + stderr expect(output).toContain( - 'Warning: Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images.' + 'Warning: Using `` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images.' ) expect(output).toContain('Error: Synchronous scripts should not be used.') }) @@ -788,7 +788,7 @@ describe('ESLint', () => { expect(output).toContain('pages/bar.js') expect(output).toContain( - 'Warning: Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images.' + 'Warning: Using `` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images.' ) expect(output).not.toContain('pages/index.js') @@ -833,7 +833,7 @@ describe('ESLint', () => { }), expect.objectContaining({ message: - 'Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images. Note: when self-hosting, Image Optimization runs on your Next.js server. If using an external loader, additional usage or cost could be incurred, depending on your provider. See: https://nextjs.org/docs/messages/no-img-element', + "Using `` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images. Note: check your provider's pricing of bandwidth and image optimization to see how this may impact your bill. See: https://nextjs.org/docs/messages/no-img-element", }), ]) ) @@ -872,7 +872,7 @@ describe('ESLint', () => { 'img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.' ) expect(fileOutput).toContain( - 'Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images. Note: when self-hosting, Image Optimization runs on your Next.js server. If using an external loader, additional usage or cost could be incurred, depending on your provider. See: https://nextjs.org/docs/messages/no-img-element' + "Using `` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images. Note: check your provider's pricing of bandwidth and image optimization to see how this may impact your bill. See: https://nextjs.org/docs/messages/no-img-element" ) expect(fileOutput).toContain('file-linting/pages/index.js') @@ -912,7 +912,7 @@ describe('ESLint', () => { 'img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.' ) expect(output).toContain( - 'Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images. Note: when self-hosting, Image Optimization runs on your Next.js server. If using an external loader, additional usage or cost could be incurred, depending on your provider. See: https://nextjs.org/docs/messages/no-img-element' + "Using `` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images. Note: check your provider's pricing of bandwidth and image optimization to see how this may impact your bill. See: https://nextjs.org/docs/messages/no-img-element" ) expect(output).toContain('pages/index.cjs') diff --git a/test/unit/eslint-plugin-next/no-img-element.test.ts b/test/unit/eslint-plugin-next/no-img-element.test.ts index 024f8954da061..c1fa838d291fa 100644 --- a/test/unit/eslint-plugin-next/no-img-element.test.ts +++ b/test/unit/eslint-plugin-next/no-img-element.test.ts @@ -81,7 +81,7 @@ ruleTester.run('no-img-element', rule, { errors: [ { message: - 'Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images. Note: when self-hosting, Image Optimization runs on your Next.js server. If using an external loader, additional usage or cost could be incurred, depending on your provider. See: https://nextjs.org/docs/messages/no-img-element', + "Using `` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images. Note: check your provider's pricing of bandwidth and image optimization to see how this may impact your bill. See: https://nextjs.org/docs/messages/no-img-element", type: 'JSXOpeningElement', }, ], @@ -103,7 +103,7 @@ ruleTester.run('no-img-element', rule, { errors: [ { message: - 'Using `` could result in slower LCP and higher bandwidth due to image sizes. Consider using `` from `next/image` to automatically optimize images. Note: when self-hosting, Image Optimization runs on your Next.js server. If using an external loader, additional usage or cost could be incurred, depending on your provider. See: https://nextjs.org/docs/messages/no-img-element', + "Using `` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images. Note: check your provider's pricing of bandwidth and image optimization to see how this may impact your bill. See: https://nextjs.org/docs/messages/no-img-element", type: 'JSXOpeningElement', }, ], From fdaaf5ddcf7c90bd29732bc7c2bf29509512151f Mon Sep 17 00:00:00 2001 From: Michael Novotny Date: Wed, 1 Mar 2023 12:46:17 -0600 Subject: [PATCH 4/6] Adds better pricing notes to message page. --- errors/no-img-element.md | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/errors/no-img-element.md b/errors/no-img-element.md index 2fa070bf861bf..d0e0eb49ff20b 100644 --- a/errors/no-img-element.md +++ b/errors/no-img-element.md @@ -1,16 +1,24 @@ # No img element -> Prevent usage of `` element to prevent layout shift and favor [optimized images](https://nextjs.org/docs/basic-features/image-optimization). +> Prevent usage of `` element due to slower LCP and higher bandwidth. ### Why This Error Occurred -An `` element was used to display an image. +An `` element was used to display an image instead of `` from `next/image`. ### Possible Ways to Fix It Use [`next/image`](https://nextjs.org/docs/api-reference/next/image) to improve performance with automatic [Image Optimization](https://nextjs.org/docs/basic-features/image-optimization). -> Note: If deploying to a [managed hosting provider](https://nextjs.org/docs/deployment), remember to check pricing since optimized images might be charged differently than the original images. If self-hosting, remember to install [`sharp`](https://www.npmjs.com/package/sharp) and check if your server has enough storage to cache the optimized images. +> Note: If deploying to a [managed hosting provider](https://nextjs.org/docs/deployment), remember to check provider pricing since optimized images might be charged differently than the original images. +> +> Common image optimization platform pricing: +> +> - [Vercel pricing](https://vercel.com/pricing) +> - [Cloudinary pricing](https://cloudinary.com/pricing) +> - [imgix pricing](https://imgix.com]/pricing) + +> Note: If self-hosting, remember to install [`sharp`](https://www.npmjs.com/package/sharp) and check if your server has enough storage to cache the optimized images. ```jsx import Image from 'next/image' @@ -31,8 +39,6 @@ export default Home If you would like to use `next/image` features such as blur-up placeholders but disable Image Optimization, you can do so using [unoptimized](https://nextjs.org/docs/api-reference/next/image#unoptimized). -
- Or, use a `` element with the nested `` element: ```jsx From 1c11163a5d40e93957accddaee9f9106dcce57cb Mon Sep 17 00:00:00 2001 From: Michael Novotny Date: Wed, 1 Mar 2023 14:17:19 -0600 Subject: [PATCH 5/6] Updates message. --- packages/eslint-plugin-next/src/rules/no-img-element.ts | 2 +- test/integration/eslint/test/index.test.js | 6 +++--- test/unit/eslint-plugin-next/no-img-element.test.ts | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/eslint-plugin-next/src/rules/no-img-element.ts b/packages/eslint-plugin-next/src/rules/no-img-element.ts index 87f93a94a658a..d53bd38974f74 100644 --- a/packages/eslint-plugin-next/src/rules/no-img-element.ts +++ b/packages/eslint-plugin-next/src/rules/no-img-element.ts @@ -31,7 +31,7 @@ export = defineRule({ context.report({ node, - message: `Using \`\` could result in slower LCP and higher bandwidth. Consider using \`\` from \`next/image\` to automatically optimize images. Note: check your provider's pricing of bandwidth and image optimization to see how this may impact your bill. See: ${url}`, + message: `Using \`\` could result in slower LCP and higher bandwidth. Consider using \`\` from \`next/image\` to automatically optimize images. This may incur additional usage or cost from your provider. See: ${url}`, }) }, } diff --git a/test/integration/eslint/test/index.test.js b/test/integration/eslint/test/index.test.js index 0710ad13fa77d..c01bbc17430bf 100644 --- a/test/integration/eslint/test/index.test.js +++ b/test/integration/eslint/test/index.test.js @@ -833,7 +833,7 @@ describe('ESLint', () => { }), expect.objectContaining({ message: - "Using `` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images. Note: check your provider's pricing of bandwidth and image optimization to see how this may impact your bill. See: https://nextjs.org/docs/messages/no-img-element", + 'Using `` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element', }), ]) ) @@ -872,7 +872,7 @@ describe('ESLint', () => { 'img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.' ) expect(fileOutput).toContain( - "Using `` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images. Note: check your provider's pricing of bandwidth and image optimization to see how this may impact your bill. See: https://nextjs.org/docs/messages/no-img-element" + 'Using `` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element' ) expect(fileOutput).toContain('file-linting/pages/index.js') @@ -912,7 +912,7 @@ describe('ESLint', () => { 'img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.' ) expect(output).toContain( - "Using `` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images. Note: check your provider's pricing of bandwidth and image optimization to see how this may impact your bill. See: https://nextjs.org/docs/messages/no-img-element" + 'Using `` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element' ) expect(output).toContain('pages/index.cjs') diff --git a/test/unit/eslint-plugin-next/no-img-element.test.ts b/test/unit/eslint-plugin-next/no-img-element.test.ts index c1fa838d291fa..e137f2c70d92a 100644 --- a/test/unit/eslint-plugin-next/no-img-element.test.ts +++ b/test/unit/eslint-plugin-next/no-img-element.test.ts @@ -81,7 +81,7 @@ ruleTester.run('no-img-element', rule, { errors: [ { message: - "Using `` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images. Note: check your provider's pricing of bandwidth and image optimization to see how this may impact your bill. See: https://nextjs.org/docs/messages/no-img-element", + 'Using `` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element', type: 'JSXOpeningElement', }, ], @@ -103,7 +103,7 @@ ruleTester.run('no-img-element', rule, { errors: [ { message: - "Using `` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images. Note: check your provider's pricing of bandwidth and image optimization to see how this may impact your bill. See: https://nextjs.org/docs/messages/no-img-element", + 'Using `` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element', type: 'JSXOpeningElement', }, ], From 5783b88d33e6f134c2749003ca3c6292727d9a50 Mon Sep 17 00:00:00 2001 From: Steven Date: Wed, 1 Mar 2023 15:19:45 -0500 Subject: [PATCH 6/6] Fix typo in imgix link --- errors/no-img-element.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/errors/no-img-element.md b/errors/no-img-element.md index d0e0eb49ff20b..b261bab00fb72 100644 --- a/errors/no-img-element.md +++ b/errors/no-img-element.md @@ -16,7 +16,7 @@ Use [`next/image`](https://nextjs.org/docs/api-reference/next/image) to improve > > - [Vercel pricing](https://vercel.com/pricing) > - [Cloudinary pricing](https://cloudinary.com/pricing) -> - [imgix pricing](https://imgix.com]/pricing) +> - [imgix pricing](https://imgix.com/pricing) > Note: If self-hosting, remember to install [`sharp`](https://www.npmjs.com/package/sharp) and check if your server has enough storage to cache the optimized images.