next js disable page scroll

Step 1: Install the necessary package

npm install --save body-scroll-lock

Step 2: Create a new file for the custom hook

Create a new file, for example, useLockBodyScroll.js, and add the following code:

import { useLayoutEffect } from 'react';
import bodyScrollLock from 'body-scroll-lock';

export default function useLockBodyScroll() {
  useLayoutEffect(() => {
    const bodyElement = document.querySelector('body');
    bodyScrollLock.disableBodyScroll(bodyElement);

    return () => {
      bodyScrollLock.enableBodyScroll(bodyElement);
    };
  }, []);
}

Step 3: Implement the custom hook in the desired page

In the page where you want to disable the scroll, import the custom hook and use it as follows:

import useLockBodyScroll from '../path/to/useLockBodyScroll';

function MyPage() {
  useLockBodyScroll();

  // Rest of the component logic
}

Step 4: Test the page

After implementing the custom hook, test the page to ensure that the scroll is disabled as expected.