Installation of react-image-magnify on nextjs for zooming products in PDP page.

To install react-image-magnify in a Next.js project, you can follow these steps:

Step 1: Install React Image Magnify. Use npm or yarn to install the react-image-magnify package along with its peer dependencies.

npm install react-image-magnify

Step 2: Import and Use in Your Next.js Component: You can import and use react-image-magnify in your Next.js component where you want to display the magnified image.

import React from 'react';
import ImageMagnify from 'react-image-magnify';


const YourComponent = () => {
    return (
        <ImageMagnify
            {...{
                smallImage: {
                    alt: 'Small Image',
                    isFluidWidth: true,
                    src: 'small_image.jpg'
                },
                largeImage: {
                    src: 'large_image.jpg',
                    width: 1200,
                    height: 1800
                },
                lensStyle: { backgroundColor: 'rgba(0,0,0,.6)' }
            }}
        />
    );
};

export default YourComponent;

Step 3: Styling: You might need to add some custom styles to make the magnification work as expected. Refer to the react-image-magnify documentation for more information on styling.

Step 4: Testing: Make sure to test your implementation to ensure that the magnification functionality works as desired in your Next.js application.

Remember to replace’small_image.jpg’ and ‘large_image.jpg’ with the actual paths to your small and large images. Also, adjust the configuration props according to your requirements.