forestoreからデータを取り出し、一覧機能を作りたい

コレクション名はhandsOnで登録しており、titileだけを出したいのですが、
index画面を開いてもまっさらなままです。

このようなエラーが出ています。ネットワークエラーは見られません。。

コンソールを仕込んだのですが、出力することができませんでした。

error
1GET http://localhost:3000/static/images/cards/contemplative-reptile.jpg 404 (Not Found)
2
3
4GET http://localhost:3000/static/images/cards/contemplative-reptile.jpg 404 (Not Found)

index
1import { db } from '../../firebase/index'
2import React from 'react'
3
4export default class HandsOn extends React.Component {
5  static async getInitialProps() {
6    console.log(db)　　コンソールを仕込んだところ
7    let result = await new Promise((resolve, reject) => {
8      db.collection('handsOn')
9        .get()
10        .then((snapshot) => {
11          let data = []
12          snapshot.forEach((doc) => {
13            data.push(
14              Object.assign(
15                {
16                  id: doc.id,
17                },
18                doc.data(),
19              ),
20            )
21          })
22          resolve(data)
23        })
24        .catch((error) => {
25          reject([])
26        })
27    })
28    return { handsOn: result }
29  }
30
31  // handleDelete = (id) => {
32  //   console.log(id)
33  // }
34
35  render() {
36    const handsOn = this.props.handsOn
37    return (
38      <React.Fragment>
39        {handsOn.map((post) => (
40          <div className="post" key={post.id}>
41            <h2>{post.title}</h2>
42            <p>{post.body}</p>
43            <button onClick={this.handleDelete.bind(this, post.id)}>削除</button>
44          </div>
45        ))}
46        <style jsx>{`
47          .post {
48            width: 40%;
49            border: 1px solid black;
50            background-color: gray;
51            margin-bottom: 10px;
52          }
53        `}</style>
54      </React.Fragment>
55    )
56  }
57}