firestore Database をSSGする

[tani1220]

やりたいこと

• firestore/ドキュメント追加時に指定した自動化IDを使用して動的ページとしてURLに出力

問題

firestore/ドキュメント内のデータは順序がなく、自動化IDの降順でデータが並べられている（ランダム）従ってget()で取得したデータをmap関数で回しても表示データは時間ベースの順序ではなくてランダムとなる。 時間ベースの順序でデータを取得するには、タイムスタンプフィールドを追加してorderBy()で指定する必要がある。

問題１

Next.jsでssgする場合、getStaticPathsで動的ページのURLを指定してgetStaticPropsに渡し、getStaticPropsでURLに紐づいたデータを取得する必要があるが、getStaticPropsでタイムスタンプフィールドの値を取得するとエラーが起こる。

Error: Error serializing .initialData.createdAt returned from getStaticProps in "/tasks/[id]". Reason: object ("[object Object]") cannot be serialized as JSON. Please only return JSON serializable data types.

[tani1220]

解決方法

タイムスタンプを追加する関数にJSON.stringify()を使用する。

原因

タイムスタンプフィールドを追加するのにfirestoreのメソッドを使っていてので、恐らくsuperJsonやJSON.stringify()が効かなかった。 普通にadd()で追加する時にnew Date()を使えばよかったみたい

const hundleAdd = () => { db.collection('tasks').add({ question: values.text, name: values.name, createdAt: JSON.stringify(new Date()), }) setValues({ text: '', name: '' }) }