Hi. I'm having an issue with one of my components that uses 'fs' to read files from directories. The error happens inside my getStaticProps() function. The error I'm getting (also attached screenshot):
NOTE: When making the component its own page, everything works fine, but I need it as a component.

./Components/SearchBar.jsx:9:0
Module not found: Can't resolve 'fs'
7 | import { useState, useEffect } from "react";
8 |
9 | import fs from "fs";
10 | import path from "path";
11 | import matter from "gray-matter";
12 |

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./pages/_app.js

I researched online and recent posts are saying it has something to do with using 'fs' in the client side vs server side. I'm not fully understanding, could someone help fix this error please.