Optimize images with Uploadcare on the fly by using the
component or the
uploadcareLoader custom image loader for Next.js.
The built-in Next.js Image component does a great job in optimizing images but
the number of optimizations is limited. It allows setting a custom image loader
to process images externally. This is where the
package comes in handy.
yarn add @uploadcare/nextjs-loader
Don’t forget to set your app base URL, which is necessary to process local images properly.
Find additional settings, such as image transformation settings, custom CDN domain, and custom proxy domain, in the developer documentation on Github.
Allow custom image loaders through
You’re all set now.
The easiest and the most straightforward way of utilizing the power of
Uploadcare is to use the
UploadcareImage component for all images on your
site the same way as the built-in
If you still need to use the built-in Image component with the
Note that if you pass a local image URL, the loader returns it AS IS if the app
is run in the development mode or if the
is not set.
Read the full documentation on GitHub.