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

Finally, Alex Grenishin from the Uploadcare team added ShipJs integration, improved auto-deployments and helped fix some issues.

You can test the project in action here and check out its code on Github @uploadcare/nextjs-loader. Feel free to suggest your improvements in the issue queue on Github.

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.