Next.JS использует модуль fs в компоненте, который не отображается напрямую

Question

Моя цель — красиво отобразить код с помощью prismjs в приложении next.js. Мой код хранится в папке данных локально. Я использую пакеты react-syntax-highlighter и fs-extranpm. fs нельзя использовать напрямую, потому что он не работает в браузере, но пакет fs-extranpm позволяет нам использовать его как промис.

Работает следующий код:

      import { promises as fs } from "fs-extra";

export async function getStaticProps() {
  const code1 = await fs.readFile("./data/code1.js", "utf8");

  return {
    props: {
      code1,
    },
  };
}

а затем я использую код 1 и могу отображать его по желанию.

ОДНАКО, в настоящее время я хочу получить данные динамического маршрута, и поэтому мой компонент не отображается напрямую, и у меня есть следующая ошибка «Ошибка: модуль не найден: не удается разрешить« fs »»

Я изменил свою следующую конфигурацию и добавил следующее:

      webpack5: true,
   webpack: (config) => {
     config.resolve.fallback = { fs: false }
     return config
   }

После этого ошибка изменилась на: TypeError: fs.realpath is undefined

Что я могу сделать?

P.S. Это мой первый пост, надеюсь не запутался.