在next.js项目中，在div样式设置为height:100vh;flex-wrap:wrap;overflow-y: auto;display: block;的标签中可以下来数据列表，如何动态检测用户拉到该div的最低部，去实现动态加载下一页数据page:2，并跟新到列表中，继续下拉，继续加载第三页数据page:3

您可以使用Intersection Observer API来实现动态加载数据。首，您需要创建一个观察器，以便在用户滚动到元素的最底部时触发加载下一页的操作。以下是一个简单的示例代码：

// 创建一个观察器
const observer = new IntersectionObserver((entries) => {
  const firstEntry = entries[0];
  if (firstEntry.isIntersecting) {
    // 当用户滚动到div的最底部时，加载下一页数据
    loadNextPage();
  }
});

// 将观察器绑定到需要进行观察的元素上
const targetElement = document.getElementById('your-div-id');
observer.observe(targetElement);

// 加载下一页数据的函数
function loadNextPage() {
  // 发起请求，获取下一页数据（假设使用异步请求获取数据）
  const nextPageData = fetchNextPageData();

  // 处理获取到的下一页数据
  nextPageData.then((data) => {
    // 更新列表中的数据，如将新数据追加到已有列表中
    appendDataToList(data);

    // 停止观察当前元素，避免重复触发加载下一页的操作
    observer.unobserve(targetElement);
    
    // 如果还有更多页数据需要加载，重新绑定观察器到新的元素上
    if (hasMorePages()) {
      const newTargetElement = document.getElementById('your-new-div-id');
      observer.observe(newTargetElement);
    }
  });
}

// 检查是否还有更多页数据需要加载
function hasMorePages() {
  // 根据业务逻辑判断是否还有更多页数据需要加载
  // 返回 true 或 false
}

// 将新数据追加到已有列表中的函数
function appendDataToList(data) {
  // 根据业务逻辑将新数据追加到已有列表中
}

请注意，您需要根据您的具体项目结构和业务逻辑进行相应的调整。以上代码仅提供了一个基本的示例，您需要根据您的实际需求进行适配和扩展。