Next.js获取并在返回时显示为输出

Question

我仍在学习next.js。我在尝试将json绑定到输出时遇到问题。我正在使用Api获取json，然后通过使用javascript捆绑其数据。这是我的代码

const Index = props => {
    var data = '';
    var listPost = props.obj.data;
    Object.keys(listPost).forEach(function (key){
        const obj = listPost[key];
        Object.keys(obj).forEach(function(arr){
            data += '<div class="p-2">'+obj[arr]+'</div>'; //im gonna show this
        });
    });
    return(
  <Layout>
    <h1>Post List</h1>
    {data} //here I would show
  </Layout>
  );
};

Index.getInitialProps = async function() {
  const res = await fetch('http://192.168.64.2/api.php');
  const obj = await res.json();

  return {
    obj
  };
};

export default Index;

我不知道为什么，数据输出不是html。我试图将代码放在return语句下，但出现错误。如果我放在它前面，它可以工作，但是会显示html代码。而不是输出。