Deploy Next.js Image Transformations

Drop-in replacement for vercel's image optimization service.

Deploy Next.js Image Transformations

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

  1. In next.config.js add the following:
module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './loader.js',
  },
}
  1. 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

More templates in this category

View Template
Foundry Virtual Tabletop
A Self-Hosted & Modern Roleplaying Platform

View Template
(v1) Simple Medusa Backend
Deploy an ecommerce backend and admin using Medusa

View Template
peppermint
Docker-compose port for peppermint.sh