Next.jsで配列内のJSONデータで必要な部分のみ出力したい

はじめに

もっと良い方法があるかもしれないですが、調べた中で上手くいったコードをメモがてら記載

コード

index.js

const [qiita, setQiita] = useState('');
const fetchQiita = async () => {
  // データを取得
  const response = await fetch(`/api/qiita?query=${keyword}`);
  let qiita = await response.json();
　// 配列を1つ出力して別の変数に格納
  const listQiita = qiita.map(article => 
    <>
      <li><a href={article.url} target="_blank" rel="noopener noreferrer">{article.title}</a></li>
      <li>{article.body}</li>
    </>
  );
　// useStateの変数にセットする
  setQiita(listQiita);
};
---
// 以下{qiita}で画面に出力する
<div>
  <ul>
    {qiita}
  </ul>
</div>

参考