How to use the useWindowSize hook for responsive design in Next.js

To use the useWindowSize hook for responsive design in a Next.js project, you first need to create the hook itself. Here's a simple example of a useWindowSize hook that you can use:

1. Create a new file for your hook, for example, useWindowSize.js:

jsxCopy code
// useWindowSize.js
import { useState, useEffect } from 'react';

export default function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined,
  });

  useEffect(() => {
    // Handler to update window size
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    // Add event listener
    window.addEventListener('resize', handleResize);

    // Call handler right away to get initial window size
    handleResize();

    // Remove event listener on cleanup
    return () => window.removeEventListener('resize', handleResize);
  }, []); // Empty dependency array ensures that effect only runs on mount and unmount

  return windowSize;
}

2. Now, you can use this hook in your Next.js components. Import the useWindowSize hook and use it to determine the window size for responsive design.

jsxCopy code
// YourComponent.js
import React from 'react';
import useWindowSize from '../path/to/useWindowSize';

function YourComponent() {
  const windowSize = useWindowSize();

  // Access windowSize.width and windowSize.height for responsive design

  return (
    <div>
      <p>Window Width: {windowSize.width}</p>
      <p>Window Height: {windowSize.height}</p>
      {/* Your responsive design components go here */}
    </div>
  );
}

export default YourComponent;

Now, whenever the window is resized, windowSize.width and windowSize.height will be updated, allowing you to conditionally render components based on the window size. This is a basic example, and you can customize it further based on your specific requirements for responsive design in Next.js.