How to implement a context menu in Next.js

Implementing a context menu in a Next.js application involves creating a custom component for the context menu and handling the display of the menu based on user interactions. Here's a simple example using React and Next.js:

1. Create a new ContextMenu component:

   jsxCopy code
   // components/ContextMenu.js
   
   import React from 'react';
   
   const ContextMenu = ({ isVisible, position, items, onClose }) => {
     if (!isVisible) {
       return null;
     }
   
     return (
       <div
         style={{
           position: 'absolute',
           top: position.y,
           left: position.x,
           border: '1px solid #ccc',
           backgroundColor: '#fff',
           padding: '5px',
         }}
       >
         {items.map((item, index) => (
           <div key={index} onClick={() => item.onClick()}>{item.label}</div>
         ))}
       </div>
     );
   };
   
   export default ContextMenu;
   

2. Use the ContextMenu component in your page or component:

   jsxCopy code
   // pages/index.js
   
   import React, { useState } from 'react';
   import ContextMenu from '../components/ContextMenu';
   
   const HomePage = () => {
     const [contextMenuVisible, setContextMenuVisible] = useState(false);
     const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
   
     const showContextMenu = (e) => {
       e.preventDefault();
       setContextMenuVisible(true);
       setContextMenuPosition({ x: e.clientX, y: e.clientY });
     };
   
     const hideContextMenu = () => {
       setContextMenuVisible(false);
     };
   
     const handleContextItemClick = () => {
       // Handle context menu item click
       hideContextMenu();
     };
   
     return (
       <div onContextMenu={showContextMenu}>
         <h1>Right-click me</h1>
   
         <ContextMenu
           isVisible={contextMenuVisible}
           position={contextMenuPosition}
           items={[
             { label: 'Item 1', onClick: handleContextItemClick },
             { label: 'Item 2', onClick: handleContextItemClick },
             { label: 'Item 3', onClick: handleContextItemClick },
           ]}
           onClose={hideContextMenu}
         />
       </div>
     );
   };
   
   export default HomePage;
   

In this example, the ContextMenu component takes props like isVisible, position, items, and onClose. The onContextMenu event is used to trigger the context menu, and the position is determined by the mouse coordinates. You can customize the appearance and behavior of the context menu based on your specific requirements.