Next.js でローカルファイルを読み込む【Module not found: Can't resolve 'fs'】

tl;dr

こういうエラーが出たときは

Module not found: Can't resolve 'fs'
  1 | import path from "path";
> 2 | import fs from "fs";
  3 | export default function Home({ content }) {
  4 | const fileContents = fs.readFileSync(filename, "utf8");
  5 | return <AnotherPage content={content} />;

以下2点を抑えてfsを使用。

• pages/*のファイルで定義する
• getStaticPropsの中で使用する

pages/siteinfo.js

import path from "path";
import fs from "fs";
export default function Home({ content }) {
  return <AnotherPage content={content} />;
}

export async function getStaticProps() {
  const filename = path.join(process.cwd(), "contents/memo.md");
  const fileContents = fs.readFileSync(filename, "utf8");

  return {
    props: { content: fileContents },
  };
}

なぜpages/*以外のディレクトリでは使用出来ない？

ページからgetStaticProps（静的サイト生成）という関数をエクスポートすると、Next.jsはビルド時にgetStaticPropsが返すpropsを使用してこのページをプリレンダリングします。(Deepl翻訳)

ページのレンダリング時にgetStaticPropsが実行されるからのようです。
エラーメッセージModule not found: Can't resolve 'fs'は少しわかりづらいような気もします。

なぜgetStaticPropsの中で使用する？

asyncやawaitはgetStaticProps内で使用する必要があります。詳細な理由は後ほど調べます。

どういう状況でこのエラーに遭遇した？

next.js14でサイトを作成中の初心者です。
markdownで書かれた記事をhtmlに変換して表示しようと試行錯誤していたところ、こんなエラーに遭遇しました。
助言や質問があれば気軽にコメントください。一緒に解決しましょう。