getStaticProps using nextjs?

[frankandrobot]

I use nextjs as I've set up my app to treat MDX files as pages (as per the docs).

However, how can I use getStaticProps for MDX files? The use case is that I have a TOC generated a compile-time from other pages in the app, so that I need to insert additional data into the MDX files at build time.

Or do I need to use something like mdx remote?

[ChristianMurphy]

There is an example of how to use mdx with getStaticProps in #1452 (reply in thread)

[frankandrobot]

Not sure what you mean. In my repo, I have a file for handling dynamic routes, [link].tsx, but it is not loaded when I visit an MDX file directly. In other words, my problem is that an MDX page will be loaded outside of nextjs' dynamic routes.

You can view the code here: https://gitlab.com/robotandkid/consulting/-/tree/master/apps/urielavalos

cc @ChristianMurphy

[ChristianMurphy]

Not sure what you mean

Your original question sounded like you wanted to use mdx inside getStaticProps, thanks for clarifying.

my problem is that an MDX page will be loaded outside of nextjs' dynamic routes
Or do I need to use something like mdx remote?

MDX translates Markdown and JSX into React (or Vue or Preact) components.
Data loading and Routing are outside the scope of MDX, and are handled by other projects like MDX remote.

[frankandrobot]

So to confirm, if I need to insert metadata into an MDX file at build time using getStaticProps, I need to use something like MDX remote ? @ChristianMurphy

[ChristianMurphy]

if I need to insert metadata into an MDX file

There are many ways to add metadata at built time,
but if you specifically want a prebuilt way to do this

using getStaticProps

in Next JS specifically, then yes something like MDX remote would be a good option.