@millihq/pixel-core NPM

Pixel for Next.js - Core

This is the core package of Pixel for Next.js. It is a small wrapper that extracts the image-optimization functionality of Next.js and makes it usable without starting the whole Next.js server.

Installation

Install the package @millihq/pixel-core with your favorite package manager.
You also need to install next and its peer dependencies react and react-dom.

By default squoosh is used as image optimization engine (Next.js default).
If you want to use sharp instead, you have to install it as an additional dependency.

npm i @millihq/pixel-core next react react-dom        # squoosh
npm i @millihq/pixel-core next react react-dom sharp  # sharp

`fetch` usage

Under the hood, Next.js needs global fetch available to request the image from the original source. The module polyfills it with node-fetch if it is not available.

If you are using a Node.js version < 18 you should also add it as peer dependency:

npm i node-fetch

Usage

Pixel can be integrated with the standard Node.js HTTP request and response model.

import { readFileSync } from 'fs';
import http, { IncomingMessage, ServerResponse } from 'http';
import { parse as parseUrl } from 'url';

import { Pixel } from '@millihq/pixel-core';

const pixel = new Pixel({
  async requestHandler(req, res) {
    // Load images here that are requested from an absolute path, e.g.
    //
    // /my-image.png
    // => http:localhost:3000/_next/image?w=512&q=75&url=%2Fmy-image.png
    res.write(readFileSync('my-image.png'));
    res.end();
  },
  // Customize the behavior of the image optimizer by providing a custom
  // config, see: https://nextjs.org/docs/api-reference/next/image#advanced
  imageConfig: {
    ...
  },
});

async function listener(req: IncomingMessage, res: ServerResponse) {
  const url = parseUrl(req.url!, true);
  const result = await pixel.imageOptimizer(req, res, url);

  if ('error' in result) {
    res.statusCode = result.statusCode;
    res.end(result.error);
    return;
  }

  res.setHeader('Content-Type', result.contentType);
  res.setHeader('Cache-Control', `public, max-age=${result.maxAge}`);
  res.end(result.buffer);
}

const server = http.createServer(listener);
server.listen(3000);