Next.js 如何解决NextJs错误：未能加载/加载组件

我通过

npx-create-next-app

初始化了一个NextJs应用程序（v10.2.0），并在

pages文件夹的
index.js
文件中的下面的代码中进行了重新编译。
我试图从json文件中获取数据，然后将其作为道具传递给页面组件

import fs from 'fs/promises';
import path from 'path';

function Home(props) {
  const { products } = props;

  return (
    <ul>
      {products.map((product) => {
        return <li key={product.id}>{product.title}</li>;
      })}
    </ul>
  );
}


export async function getStaticProps() {

  const filePath = path.join(process.cwd(), 'data', 'products-data.json');
  const jsonData = await fs.readFile(filePath);
  const data = JSON.parse(jsonData);

  console.log(data);

  return {
    props: {
      products: data.products
    }
  };
}

export default Home;

但是，当我运行
npm run dev
时，会出现以下错误：

Error: Failed to load /
    at loadComponents (/home/ali/Desktop/NextJs3/nextjs3/node_modules/next/dist/next-server/server/load-components.js:1:1554)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async DevServer.findPageComponents (/home/ali/Desktop/NextJs3/nextjs3/node_modules/next/dist/next-server/server/next-server.js:76:257)
    at async DevServer.renderToHTML (/home/ali/Desktop/NextJs3/nextjs3/node_modules/next/dist/next-server/server/next-server.js:137:542)
    at async DevServer.renderToHTML (/home/ali/Desktop/NextJs3/nextjs3/node_modules/next/dist/server/next-dev-server.js:36:578)
    at async DevServer.render (/home/ali/Desktop/NextJs3/nextjs3/node_modules/next/dist/next-server/server/next-server.js:74:255)
    at async Object.fn (/home/ali/Desktop/NextJs3/nextjs3/node_modules/next/dist/next-server/server/next-server.js:58:672)
    at async Router.execute (/home/ali/Desktop/NextJs3/nextjs3/node_modules/next/dist/next-server/server/router.js:25:67)
    at async DevServer.run (/home/ali/Desktop/NextJs3/nextjs3/node_modules/next/dist/next-server/server/next-server.js:68:1042)
    at async DevServer.handleRequest (/home/ali/Desktop/NextJs3/nextjs3/node_modules/next/dist/next-server/server/next-server.js:32:504)

这个代码有什么问题？是因为导入了核心节点模块吗？
一旦我将基于承诺的
readFile（）
版本更改为
readFileSync（）
，它就成功了：）
不知道为什么，但它是有效的

已编辑的代码部分：

import fs from 'fs';
.
.
.
const jsonData = fs.readFileSync(filePath);
.
.
.

但是在这种情况下，无法理解如何使用
readFile
的异步版本

import fs from 'fs';
.
.
.
const jsonData = fs.readFileSync(filePath);
.
.
.