Javascript 我想使用next.js中的getInitialProps（）记录数据

我是next.js的新手，我只想从这个免费api中获取数据

index.js组件

import UserList from "./userList";

export default function Home() {
  return (
    <div>
      <UserList></UserList>
    </div>
  );
}

从“/UserList”导入用户列表；
导出默认函数Home（）{
返回(
);
}

用户列表组件：

const UserList = (data) => {
console.log(data);
return <div>test</div>;
};
UserList.getInitialProps = async () => {
  const resp = await fetch(`https://reqres.in/api/users?page=2`);
  const data = await resp.json();
  console.log(data);
  return { data };
};
export default UserList;

constuserlist=（数据）=>{
控制台日志（数据）；
回归试验；
};
UserList.getInitialProps=async（）=>{
const resp=等待提取(`https://reqres.in/api/users?page=2`);
const data=wait resp.json（）；
控制台日志（数据）；
返回{data}；
};
导出默认用户列表；

使用

console.log（data）

没有任何作用，有任何帮助吗？

import React，{useState，useffect}来自“React”；
import React, { useState, useEffect } from "react";

function UserList() {
  const [data, setData] = useState("");
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    getUsers();
  }, []);
  async function getUsers() {
    setLoading(true);
    fetch("https://reqres.in/api/users?page=2")
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
        console.log(data);
      })
      .catch((error) => {
        console.log(error);
        setLoading(false);
      });
  }

  return <>{loading ? <div>...Data Loading.....</div> : <div>{<p> {data.page}</p>}</div>}</>;
}

export default UserList;

函数UserList（）{
const[data，setData]=useState（“”）；
const[loading，setLoading]=useState（false）；
useffect（（）=>{
getUsers（）；
}, []);
异步函数getUsers（）{
设置加载（真）；
取回（“https://reqres.in/api/users?page=2")
.then（（response）=>response.json（））
。然后（（数据）=>{
setData（数据）；
设置加载（假）；
控制台日志（数据）；
})
.catch（（错误）=>{
console.log（错误）；
设置加载（假）；
});
}
返回{loading？…Data loading…：{{Data.page}
}；
}
导出默认用户列表；