docs(image): improve error message when sharp is missing in standalone mode

docs/advanced-features/output-file-tracing.md

@@ -16,11 +16,11 @@ During `next build`, Next.js will use [`@vercel/nft`](https://github.com/vercel/
 
 Next.js' production server is also traced for its needed files and output at `.next/next-server.js.nft.json` which can be leveraged in production.
 
-To leverage the `.nft.json` files emitted to the `.next` output directory, you can read the list of files in each trace which are relative to the `.nft.json` file and then copy them to your deployment location.
+To leverage the `.nft.json` files emitted to the `.next` output directory, you can read the list of files in each trace that are relative to the `.nft.json` file and then copy them to your deployment location.
 
 ## Automatically Copying Traced Files
 
-Next.js can automatically create a `standalone` folder which copies only the necessary files for a production deployment including select files in `node_modules`.
+Next.js can automatically create a `standalone` folder that copies only the necessary files for a production deployment including select files in `node_modules`.
 
 To leverage this automatic copying you can enable it in your `next.config.js`:
 
@@ -30,12 +30,26 @@ module.exports = {
 }
 ```
 
-This will create a folder at `.next/standalone` which can then be deployed on it's own without installing `node_modules`.
+This will create a folder at `.next/standalone` which can then be deployed on its own without installing `node_modules`.
 
 Additionally, a minimal `server.js` file is also output which can be used instead of `next start`. This minimal server does not copy the `public` or `.next/static` folders by default as these should ideally be handled by a CDN instead, although these folders can be copied to the `standalone/public` and `standalone/.next/static` folders manually, after which `server.js` file will serve these automatically.
 
 Note: `next.config.js` is read during `next build` and serialized into the `server.js` output file. If the legacy [`serverRuntimeConfig` or `publicRuntimeConfig` options](/docs/api-reference/next.config.js/runtime-configuration.md) are being used, the values will be specific to values at build time.
 
+If your project uses relies on [Image Optimization](/docs/basic-features/image-optimization), make sure to also install `sharp` as a dependency for image optimization to function correctly in standalone mode, using one of the following commands:
+
+```bash
+npm i sharp
+```
+
+```bash
+yarn add sharp
+```
+
+```bash
+pnpm add sharp
+```
+
 ## Caveats
 
 - While tracing in monorepo setups, the project directory is used for tracing by default. For `next build packages/web-app`, `packages/web-app` would be the tracing root and any files outside of that folder will not be included. To include files outside of this folder you can set `experimental.outputFileTracingRoot` in your `next.config.js`.
@@ -50,5 +64,5 @@ module.exports = {
 }
 ```
 
-- There are some cases that Next.js might fail to include required files, or might incorrectly include unused files. In those cases, you can export page configs props `unstable_includeFiles` and `unstable_excludeFiles` respectively. Each prop accepts an array of [minimatch globs](https://www.npmjs.com/package/minimatch) relative to the project's root to either include or exclude in the trace.
+- There are some cases in which Next.js might fail to include required files, or might incorrectly include unused files. In those cases, you can export page configs props `unstable_includeFiles` and `unstable_excludeFiles` respectively. Each prop accepts an array of [minimatch globs](https://www.npmjs.com/package/minimatch) relative to the project's root to either include or exclude in the trace.
 - Currently, Next.js does not do anything with the emitted `.nft.json` files. The files must be read by your deployment platform, for example [Vercel](https://vercel.com), to create a minimal deployment. In a future release, a new command is planned to utilize these `.nft.json` files.

errors/manifest.json

@@ -737,6 +737,10 @@
         {
           "title": "nonce-contained-invalid-characters",
           "path": "/errors/nonce-contained-invalid-characters.md"
+        },
+        {
+          "title": "sharp-missing-in-standalone",
+          "path": "/errors/sharp-missing-in-standalone.md"
         }
       ]
     }

errors/sharp-missing-in-standalone.md

@@ -0,0 +1,27 @@
+# Missing sharp in standalone mode
+
+#### Why This Error Occurred
+
+You have enabled `output: "standalone"`, but forgot to install `sharp` as a dependency while depending on it due to [Image Optimization](https://nextjs.org/docs/basic-features/image-optimization). For the image optimization to function correctly, `sharp` needs to be installed.
+
+#### Possible Ways to Fix It
+
+Install `sharp` as a dependency before running `next build`:
+
+```bash
+npm i sharp
+```
+
+```bash
+yarn add sharp
+```
+
+```bash
+pnpm add sharp
+```
+
+### Useful Links
+
+- [Output File Tracing](/docs/advanced-features/output-file-tracing)
+- [Image Optimization Documentation](/docs/basic-features/image-optimization)
+- [`next/image` Documentation](/docs/api-reference/next/image)

packages/next/server/image-optimizer.ts

@@ -547,7 +547,7 @@ export async function imageOptimizer(
         // TODO: should we ensure squoosh also works even though we don't
         // recommend it be used in production and this is a production feature
         console.error(
-          `Error: 'sharp' is required to be installed in standalone mode for the image optimization to function correctly`
+          `Error: 'sharp' is required to be installed in standalone mode for the image optimization to function correctly. Read more at: https://nextjs.org/docs/messages/sharp-missing-in-standalone`
         )
         throw new ImageError(500, 'internal server error')
       }