Skip to content

Commit

Permalink
Update docs for sharp usage to mention Vercel (#28476)
Browse files Browse the repository at this point in the history
There was some confusion in [this tweet](https://twitter.com/mtliendo/status/1430269174459338759) so I revised the docs around `sharp` usage.
  • Loading branch information
styfle committed Aug 24, 2021
1 parent 4d5eaf0 commit cb6290a
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 3 deletions.
2 changes: 1 addition & 1 deletion docs/basic-features/image-optimization.md
Expand Up @@ -128,7 +128,7 @@ If you need a different provider, you can use the [`loader`](/docs/api-reference

> The `next/image` component's default loader is not supported when using [`next export`](/docs/advanced-features/static-html-export.md). However, other loader options will work.
> The `next/image` component's default loader uses the ['squoosh'](https://www.npmjs.com/package/@squoosh/lib) library for image resizing and optimization. This library is quick to install and suitable for a dev server environment. For a production environment, it is strongly recommended that you install the optional [`sharp`](https://www.npmjs.com/package/sharp) library by running `yarn add sharp` in your project directory. If sharp is already installed but can't be resolved you can manually pass the path to it via the `NEXT_SHARP_PATH` environment variable e.g. `NEXT_SHARP_PATH=/tmp/node_modules/sharp`
> The `next/image` component's default loader uses [`squoosh`](https://www.npmjs.com/package/@squoosh/lib) because it is quick to install and suitable for a development environment. When using `next start` in your production environment, it is strongly recommended that you install [`sharp`](https://www.npmjs.com/package/sharp) by running `yarn add sharp` in your project directory. This is not necessary for Vercel deployments, as `sharp` is installed automatically.
## Caching

Expand Down
9 changes: 7 additions & 2 deletions errors/sharp-missing-in-production.md
Expand Up @@ -2,11 +2,16 @@

#### Why This Error Occurred

The `next/image` component's default loader uses the ['squoosh'](https://www.npmjs.com/package/@squoosh/lib) library for image resizing and optimization. This library is quick to install and suitable for a dev server environment. For a production environment, it is strongly recommended that you install the optional [`sharp`](https://www.npmjs.com/package/sharp). This package was not detected when leveraging the Image Optimization in production mode (`next start`).
The `next/image` component's default loader uses [`squoosh`](https://www.npmjs.com/package/@squoosh/lib) because it is quick to install and suitable for a development environment. For a production environment using `next start`, it is strongly recommended you install [`sharp`](https://www.npmjs.com/package/sharp) by running `yarn add sharp` in your project directory.

You are seeing this error because Image Optimization in production mode (`next start`) was detected.

#### Possible Ways to Fix It

Install `sharp` by running `yarn add sharp` in your project directory.
- Install `sharp` by running `yarn add sharp` in your project directory and then reboot the server by running `next start` again
- If `sharp` is already installed but can't be resolved, set the `NEXT_SHARP_PATH` environment variable such as `NEXT_SHARP_PATH=/tmp/node_modules/sharp next start`

> Note: This is not necessary for Vercel deployments, since `sharp` is installed automatically for you.
### Useful Links

Expand Down

0 comments on commit cb6290a

Please sign in to comment.