hey! ive been working on website and have been stuck for a while on how to render markdown from a file when using the app router, in such a way that i can modify the rendered components (i.e. ## heading 2 can be rendered as a <p>heading 2</p> instead of <h2>heading 2</h2>, or alternatively rendered as <h2 className="text-red-500">heading 2</h2>).
My current setup is:
1. Dynamic API that fetches the relevant .md file, passes it through matter(), and then returns the content and the frontmatter
2. Call that API in the page (using a useEffect func) to return the md content into the client side

A few things i tried were:
1. using unified() + remark in the API to parse it into markdown, but that kept breaking and i couldnt figure out why
2. using next-mdx-remote, but that wouldnt work with the app router very well.

Im quite unsure on this topic, so any help on the best practices to do so would be greatly appreciated. Thank you in advance :))