Deploy Next.js Image Transformations
Drop-in replacement for vercel's image optimization service.
next-image-transformation
coollabsio/next-image-transformation
Just deployed
Deploy and Host Next.js Image Transformations on Railway
An open-source & self-hostable image optimization service, a drop-in replacement for Vercel's Image Optimization.
About Hosting Next.js Image Transformations
Common Use Cases
- Drop-in replacement for Vercel's Image Optimization.
- On the fly image optimizations, image transformations.
Dependencies for Next.js Image Transformations Hosting
-
Next Image Transformation API: A simple API written in Bun that transforms the incoming request to Imgproxy format and forwards it to the Imgproxy service.
-
Imgproxy service: A powerful and fast image processing service that can resize, crop, and transform images on the fly.
Deployment Dependencies
Source repository: https://github.com/coollabsio/next-image-transformation
Implementation Details
- In next.config.js add the following:
module.exports = {
images: {
loader: 'custom',
loaderFile: './loader.js',
},
}
- Create a file called loader.js in the root of your project and add the following:
'use client'
export default function myImageLoader({ src, width, quality }) {
const isLocal = !src.startsWith('http');
const query = new URLSearchParams();
const imageOptimizationApi = '';
// Your NextJS application URL
const baseUrl = '';
const fullSrc = `${baseUrl}${src}`;
if (width) query.set('width', width);
if (quality) query.set('quality', quality);
if (isLocal && process.env.NODE_ENV === 'development') {
return src;
}
if (isLocal) {
return `${imageOptimizationApi}/image/${fullSrc}?${query.toString()}`;
}
return `${imageOptimizationApi}/image/${src}?${query.toString()}`;
}
Replace with the URL of what you set on the Next Image Transformation API. Replace
with the URL of your Nextjs application.
Why Deploy Next.js Image Transformations on Railway?
Railway is a singular platform to deploy your infrastructure stack. Railway will host your infrastructure so you don't have to deal with configuration, while allowing you to vertically and horizontally scale it.
By deploying Next.js Image Transformations on Railway, you are one step closer to supporting a complete full-stack application with minimal burden. Host your servers, databases, AI agents, and more on Railway.
Template Content
next-image-transformation
coollabsio/next-image-transformation