[エラー]間欠タイプエラー:fs.readFileSyncは関数エラーではありません

この数日この病気にかかった😭

特定の状況でしか旅行に行くことができないので、正確な原因は分かりません.
エラーは、サーバ側からreadFileSyncにファイルを読み込んだときに発生します.

TypeError: fs.readFileSync is not a function

しかしサーバー側は「node環境だから間違いないでしょう!?これを思いついて、シャベルですくいました.
ファイルを読み込む場所は、_app.tsxファイルのアプリケーションです.getInitialPropsセクションで発生します.最初はmatter.read関数を使用してマークアップファイルをスライスしていましたが、この関数内部でreadFileSyncが呼び出されたため、エラーが発生し、素材ライブラリのエラーかと思いきや😂
やはりWebパッケージとFSモジュールの使用中に発生したエラーに関する記事を読んでこの問題だと思いました.
しかし、問題はgetInitialPropsがブラウザが提供しないfsを呼び出したことです.
実際、主な原因はgetInitialPropsに対して正確な概念が欠けていることである.
私が知っているgetInitialPropsは、getStaticPropsまたはgetServerSidePropsが登場する前にプリレンダリングに使用された概念であり、現在はgetStaticPropsとgetServerSidePropsに取って代わられています.でもapp.jsでは、getStaticPropsやgetServerSidePropsはまだ使用できないので、getInitialiPropsを使用する必要があります.
そしてサーバー側で実行されるコードです!!!これは誤った概念です.
For the initial page load, getInitialProps will run on the server only. getInitialProps will then run on the client when navigating to a different route via the next/link component or by using next/router.
公式文書をもう一度読む.ページを最初にロードすると、getInitialiPropsはサーバ上でのみ実行されます.

ただし、next/linkまたはnext/routerを使用してページ切り替えを行うと、getInitionalPropsがクライアント上で実行されます。

今やっと原因が分かったので、解決すべきだったのですが・・・

解決方法:clientからfsまで。readFileSyncに代わるものは?

ダイナミックimportを使用します.defaultを使用してファイルの内容を返します.(ファイルの内容が「マークアップ」(markdown)テキストであるため、名前を「マークアップ」(markdown)に変更します.

const file = fs.readFileSync(path); // 이 코드를 

const { default: markdown } = await import(`src/contents/blog/${path}`); // 이걸로 대체

Refs

https://github.com/vercel/next.js/discussions/12124