What is the best way to load content from Markdown files into a set of components?

[wind dagger]

Hey all,

Based on my initial investigation, what I'm trying to do simply cannot be done, but I thought I'd check in here nonetheless.

I have a Next.js app which only has a single page but I have a bunch of modals each of which contains a lot of text. I would like to move this text into a set of MD files rather than mixing this text with the code. Ideally, it would be great if I could use getStaticProps inside each of my modals, but it appears that I can only use load static props inside pages, not components. This means that I'd need to load all of my MD files inside my single index.tsx page, then commit them into my Redux store (which will also require a lot of boilerplate code) and only then I can retrieve this text from each of my modals. That feels messy to the point where I think I'm better off leaving the text inside the component tsx files. Is there a better way though?

Many thanks for reading!

[hot pasture]

Instead of fetching on the getStaticProps you can fetch directly on the component (will be client side only requests)

But you can also use something like react query to prefetch on the server and use the same query on the cliente (a little bit more work, but would have static generation)