Skip to main content

Next.js example

Resizer can be easily integrated with the Next.js <Image /> component, You can:

  • Define a global image loader for your entire app.
  • Use custom loaders for specific <Image /> components as needed.

Next.js sends image requests with parameters like width and quality, and Resizer handles caching and serving optimized formats to the client.

Next.js Demo | GitHub Repository

Setting up a global image loader​

1. Update next.config.js​

Add the following configuration to the next.config.js file in the root of your Next.js project:

module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './src/utils/image.loader.js',
  },
};

The loaderFile path must point to a file relative to your project root.

2. Create the Loader Function​

Create a file named image.loader.js at the specified path, and define a custom loader function:

'use client';

const RESIZER_BASE_URL = 'https://resizer.usebaked.com/api';

export default function ({ src, width, quality }) {
  if (process.env.NODE_ENV === 'development') {
    return src; // Skip optimization in development mode
  }
  return `${RESIZER_BASE_URL}?url=${src}&w=${width}&q=${quality || 75}`;
}
  • src: Source URL of the image.
  • width: Desired image width.
  • quality: (Optional) Image quality, defaulting to 75 if not provided.

Custom loaders​

For specific <Image /> components, you can define a custom loader function and pass it as a prop:

import Image from 'next/image';

const RESIZER_BASE_URL = 'https://resizer.usebaked.com/api';

export default function Example() {
  const loader = ({ src, width, quality }) => {
    if (process.env.NODE_ENV === 'development') {
      return src; // Skip optimization in development mode
    }
    return `${RESIZER_BASE_URL}?url=${src}&w=${width}&q=${quality || 75}`;
  };

  return (
    <Image
      loader={loader}
      src="/path-to-image.jpg"
      width={800}
      height={600}
      alt="Custom Loader Example"
    />
  );
}

For more details on Next.js <Image /> loaders, refer the official documentation.