How to use the useHover hook for creating interactive image zoom effects in Next.js

To create an interactive image zoom effect using the useHover hook in Next.js, you'll need to follow these steps:

1. Install necessary dependencies: Make sure you have react, react-dom, and next installed in your Next.js project. You'll also need to install the use-hover hook.

   bashCopy code
   npm install react react-dom next use-hover
   

2. Create a custom hook for handling hover state:

   jsxCopy code
   // useHover.js
   import { useState, useMemo } from 'react';
   
   function useHover() {
     const [isHovered, setIsHovered] = useState(false);
   
     const bind = useMemo(() => ({
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
     }), []);
   
     return [isHovered, bind];
   }
   
   export default useHover;
   

3. Implement the image zoom effect component:

   jsxCopy code
   // ZoomImage.js
   import React from 'react';
   import useHover from './useHover';
   
   function ZoomImage({ src, alt }) {
     const [isHovered, hoverProps] = useHover();
   
     return (
       <div {...hoverProps}>
         <img
           src={src}
           alt={alt}
           style={{
             width: '200px', // Set your desired width
             transition: 'transform 0.3s ease',
             transform: isHovered ? 'scale(1.5)' : 'scale(1)',
           }}
         />
       </div>
     );
   }
   
   export default ZoomImage;
   

4. Use the ZoomImage component in your Next.js pages:

   jsxCopy code
   // YourPage.js
   import React from 'react';
   import ZoomImage from './ZoomImage';
   
   function YourPage() {
     return (
       <div>
         <h1>Interactive Image Zoom</h1>
         <ZoomImage src="/your-image.jpg" alt="Your Image" />
       </div>
     );
   }
   
   export default YourPage;
   

5. Style the zoomed image and adjust properties like width, transition duration, etc., as per your requirements.

With these steps, you should have an interactive image zoom effect using the useHover hook in Next.js. When you hover over the image, it will zoom in, and when you move the cursor away, it will zoom out. Adjust the styles and transition timings as necessary for your desired effect.