Integration on Next JS

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 :

   Copy

   
   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:

   Copy

   
   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:

   Copy

   
   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 field aio`).
• Loader will not work on HTML’s img tag, it will apply only to Image component.