Next.js 引数で渡したリストの順序が変わってしまう

Question

使用しているバージョン

"next": "^12.2.0",
"react": "17.0.2",

実現したいこと

getStaticProps内でfetchしてきたjsonを引数で渡すと順序が変わってしまう問題を修正したい

前提

TypeScriptとNext.jsでブログサイトを構築し、microCMSから取得してきたデータを表示しています。

Next.jsのSSGでサイトを表示しているので、getStaticProps内でmicroCMSからfetchをしたのちに、取得してきたList型のデータを引数としてコンポーネントに値を渡しているのですが、ブラウザに表示すると、なぜか順番が変わってしまう問題が起こっています。

発生している問題・エラーメッセージ

特にエラーメッセージは出力されていません

試したこと

引数として受け取った値をconsole.log()にて出力して確認したのですが、ターミナル上では順番通りになっていました。しかし、ブラウザのconsoleに表示されたのは順序が異なったものが出力されました。

ページの更新をすると、ターミナル上は勿論のこと順番は変わらないのですが、ブラウザ上では更新するたびに順序が変わってしまいます。

教えてほしいこと

ターミナルとブラウザのコンソールで出力された値が異なる原因がわからないのでそこの原因が分かれば問題が解決できると思っています。

同様の問題を見かけたことがあるかたは参考になりそうなサイトのURLを張り付けて頂くだけでも構いませんので、教えて頂けると非常に助かります。

実際のコードは貼り付け可能ですが、コンポーネントを疎結合にしているためすべてを張り付けることが難しいです。

Answer 1

情報量がほぼゼロなので推測して書くしかないですが、

fetchしてきたjsonを引数で渡すと順序が変わってしまう
引数として受け取った値をconsole.log()にて出力して確認したのですが、

JSON文字列ではなく、JSON.parseした結果のオブジェクトを引数にして、オブジェクトをそのままconsole.log()したのでは？オブジェクトを直接出力した場合は、ブラウザによって表示方法が異なるようです。
for( in )やObject.keysで列挙してはどうでしょうか。