Integrations

Next.js custom Image loader for Nitrogen AIO

This documentation explains how to create a custom image loader in Next.js to modify image URLs for the Nitrogen AIO. This allows you to optimize images specifically for Nitrogen AIO delivery.

Prerequisites:

• You must have a domain configured on Nitrogen
• You must have AIO enabled, please refer this article.
• Basic understanding of Next.js and Nitrogen AIO.
• Node.js and npm (or yarn) installed on your development machine.
  

Steps:

1. Install package :

   npm i @n7.io/nitrogen-aio-nextjs-loader
   

2. Update Next.js Configuration:

   Open your Next.js configuration file, typically located at next.config.js in the root directory of your project. Add the following configuration under the images section:

   const nextConfig = {
           images: {
               // ... other image configurations
               loader: 'custom',
               loaderFile: 'node_modules/@n7.io/nitrogen-aio-nextjs-loader/aio-loader.js',
           },
   };
   
   export default nextConfig;
   

   This configuration tells Next.js to use your custom aioLoader function for all image optimization tasks.

3. Using the Custom Image Loader: Now you can use the src attribute in your Next.js components to specify image URLs, and the custom loader will automatically modify them for Nitrogen AIO. For example:

   import Image from 'next/image';
   
   function MyComponent() {
       return (
           <Image
           src="/images/my-image.jpg"
           alt="My image"
           width={800}
           />
       );
   }
   

   In this example, the image URL /images/my-image.jpg will be transformed to /images/my-image.jpg?aio=w-800 before being delivered to the browser. Nitrogen AIO will then resize the image to a width of 800 pixels or nearest bucket.
   

Additional Notes:

• Do not put aio parameter in src attribute, as the loader constructs this parameter based on the width and height attributes of Image component. If both found, AIO will throw 400 error (Query deserialize error: duplicate fieldaio`).
• Loader will not work on HTML's img tag, it will apply only to Image component.