在nextjs中获取和呈现json数据时出现问题

我正在nextjs中尝试一个小样本。proj所做的只是从文件中获取json数据，并尝试将其显示在组件列表中。但这种行为很奇怪。它进入了无限循环，我不知道出了什么问题。有人能帮我看一下并找出问题所在吗？无法获取数据，也无法显示。

我已克隆并修复。在这里您不需要使用fs.readFileSync，或者根本不需要使用fs。您只需将

.json

文件作为任意命名的变量导入，然后将其映射出来。

下面是我如何获得数据渲染的：

从“React”导入React；
从“../testData/SampleData.json”导入testData；
从“../components/SampleParentComponent”导入SampleParentComponent；
函数测试页（{filecontent}）{
log（`filecontent:${filecontent}`）；
返回(
);
}
export const getStaticProps=async ctx=>{
console.log（ctx.query）；
const filecontent=等待测试数据；
返回{
道具：{filecontent}
};
};
导出默认测试页面；
/**
*（属性）文件内容：{
数据：{
序号：编号；
联系人名称：字符串；
}[];
}
*/