Next.js v13 中使用 Hammer.js 实现手势交互

要将 Hammer.js 与 Next.js v13 结合起来，可以按照以下步骤进行操作：

首先，安装 Hammer.js 包。在项目根目录下运行以下命令：

npm install hammerjs

在 Next.js 的页面组件中引入 Hammer.js。例如，在一个名为 'MyComponent.js' 的组件文件中，可以添加以下代码：

import { useEffect, useRef } from 'react';
import Hammer from 'hammerjs';

const MyComponent = () => {
  const containerRef = useRef(null);
  const hammerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;
    const hammer = new Hammer(container);

    hammer.on('swipe', (event) => {
      console.log('Swipe detected:', event);
    });

    hammerRef.current = hammer;

    return () => {
      hammerRef.current.destroy();
    };
  }, []);

  return <div ref={containerRef}>Hello World</div>;
};

export default MyComponent;

在上面的代码中，我们使用了 useRef 来获取容器元素的引用，并在组件挂载时初始化了 Hammer.js 实例。我们还监听了 'swipe' 事件，并在控制台打印了事件对象。最后，我们在组件卸载时销毁了 Hammer.js 实例。

将 MyComponent 组件导入到 Next.js 页面中，并在页面中渲染组件。例如，在一个名为 'MyPage.js' 的页面文件中，可以添加以下代码：

import MyComponent from '../components/MyComponent';

const MyPage = () => {
  return (
    <div>
      <h1>My Page</h1>
      <MyComponent />
    </div>
  );
};

export default MyPage;

以上就是将 Hammer.js 与 Next.js v13 结合的基本步骤。你可以根据自己的需求在 Hammer.js 实例中添加其他事件监听器和配置项。