上面这个方法没法使用，麻烦再出一个

抱歉，我之前的回答可能不太准确。在Next.js项目中，您可以使用`react-infinite-scroll-component`库来实现无限滚动加载数据的功能。以下是一个示例代码：

首先，您需要安装`react-infinite-scroll-component`库：

npm install react-infinite-scroll-component

然后，在您的代码中使用该库：

import React, { useState, useEffect } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';

const YourComponent = () => {
  const [data, setData] = useState([]); // 存储数据的状态
  const [page, setPage] = useState(1); // 当前页数的状态

  // 加载数据的函数
  const fetchData = () => {
    // 发起请求，获取下一页数据（假设使用异步请求获取数据）
    fetch(`your-api-url?page=${page}`)
      .then((response) => response.json())
      .then((responseData) => {
        // 更新数据和页数的状态
        setData((prevData) => [...prevData, ...responseData]);
        setPage((prevPage) => prevPage + 1);
      })
      .catch((error) => {
        console.error('Error fetching data:', error);
      });
  };

  useEffect(() => {
    fetchData(); // 初始化时加载第一页数据
  }, []);

  return (
    <div style={{ height: '100vh', overflowY: 'auto' }}>
      <InfiniteScroll
        dataLength={data.length} // 当前列表数据的长度
        next={fetchData} // 滚动到底部时触发的函数
        hasMore={true} // 是否还有更多数据需要加载
        loader={<h4>Loading...</h4>} // 加载时显示的组件
        endMessage={<p>No more data.</p>} // 数据全部加载完的提示
      >
        {/* 显示数据列表 */}
        {data.map((item, index) => (
          <div key={index}>{/* 渲染每个数据项 */}</div>
        ))}
      </InfiniteScroll>
    </div>
  );
};

export default YourComponent;

在以上示例代码中，我们使用`react-infinite-scroll-component`库来包装数据列表，并通过设置相应的属性实现无限滚动加载数据的功能。`data`和`page`是用来存储数据和当前页数的状态。`fetchData`函数用来发起请求加载数据，并更新状态。在`useEffect`钩子中，我们初始化时加载第一页数据。通过在`InfiniteScroll`组件上设置`next`属性，可以指定滚动到底部时触发的函数，在这里我们调用`fetchData`来加载下一页数据。

请根据您的具体项目需求进行适当调整和修改。希望这次回答能对您有所帮助！如果您还有其他问题，请随时提问。