The Uploadcare Image Loader for Next.js Has Been Released
First of all, what's Uploadcare? Uploadcare through their API provides file uploading, processing and delivery for web apps, and does it really well.
While working on a series of Next.js tutorials for Uploadcare blog (first, second), I thought people would benefit from integrating Uploadcare services into Next.js, so I offered my help with an Open Source integration.
As it turned out, the Uploadcare guys had already tried to add their image loader to the Next.js core but for some reason Next.js team stopped accepting new third-party loaders to the core, so the Uploadcare loader remained unused in a pull request on Github.
I started with the pull request but went much further. Here is what I did:
- Extracted the loader code into a separate package
- Refactored and optimized the code
- Made it possible to configure the loader through environment variables (custom CDN domain, custom proxy domain, image transformation settings, etc.)
- Developed the UploadcareImage component with the loader integrated
- Created automated tests for the loader function and the Next.js component
- Added a Github workflow for testing and linting the project
- Added documentation for the project
And if you want to experiment with the Uploadcare file uploading widget for React, check out @uploadcare/react-widget.
Thanks to the Uploadcare team for their support and assistance.
I hope you enjoyed the post and learned something new. To get my latest updates, follow me on Twitter @kkomelin