How to properly configure MDX in app directory
Answered
Birman posted this in #help-forum
BirmanOP
Hey 👋
I’ve been reading through this page: https://nextjs.org/docs/app/building-your-application/configuring/mdx to try and get MDX working within my project for blog posts.
I feel like some of the documentation is a bit in completed or scattered so I am seeking som clarification.
Under the section
I am also having a few issues getting
Lastly, any documentation on how to programmatically gather a list of blog posts so that previews and such like can be made? I started to use nodes fs api however it isn’t really sufficient.
Any solid examples on how to achieve the above would be much appreciated. I don’t have any code to share as I binned it all off ready for a clean slate tomorrow.
I’ve been reading through this page: https://nextjs.org/docs/app/building-your-application/configuring/mdx to try and get MDX working within my project for blog posts.
I feel like some of the documentation is a bit in completed or scattered so I am seeking som clarification.
Under the section
Frontmatter - it states that frontmatter is not available without plugins is I am to use the Rust based MDX parser. It goes on to say that I can declare a meta object to pass metadata into but it does not show how this metadata is then supposed to be consumed.I am also having a few issues getting
page.mdx to render even after adding the associated file extensions to my next.config. By clicking through the links, I come to a few examples from different pieces of documentation but nothing concrete. I kept hitting a “use client†error which I added to my posts level layout but it did not seem to resolve the issue.Lastly, any documentation on how to programmatically gather a list of blog posts so that previews and such like can be made? I started to use nodes fs api however it isn’t really sufficient.
Any solid examples on how to achieve the above would be much appreciated. I don’t have any code to share as I binned it all off ready for a clean slate tomorrow.
Answered by riský
for your last post of getting "a list of blog posts", I would recommend https://contentlayer.dev/ as it gets all of your files and gives a parser (and allows for plugins), so you don't need to do as much work (you can just use contentlayer and not worry about nextjs's mdx thingy)
7 Replies
@Birman Hey 👋
I’ve been reading through this page: https://nextjs.org/docs/app/building-your-application/configuring/mdx to try and get MDX working within my project for blog posts.
I feel like some of the documentation is a bit in completed or scattered so I am seeking som clarification.
Under the section `Frontmatter` - it states that frontmatter is not available without plugins is I am to use the Rust based MDX parser. It goes on to say that I can declare a meta object to pass metadata into but it does not show how this metadata is then supposed to be consumed.
I am also having a few issues getting `page.mdx` to render even after adding the associated file extensions to my next.config. By clicking through the links, I come to a few examples from different pieces of documentation but nothing concrete. I kept hitting a “use client†error which I added to my posts level layout but it did not seem to resolve the issue.
Lastly, any documentation on how to programmatically gather a list of blog posts so that previews and such like can be made? I started to use nodes fs api however it isn’t really sufficient.
Any solid examples on how to achieve the above would be much appreciated. I don’t have any code to share as I binned it all off ready for a clean slate tomorrow.
for your last post of getting "a list of blog posts", I would recommend https://contentlayer.dev/ as it gets all of your files and gives a parser (and allows for plugins), so you don't need to do as much work (you can just use contentlayer and not worry about nextjs's mdx thingy)
Answer
@riský for your last post of getting "a list of blog posts", I would recommend <https://contentlayer.dev/> as it gets all of your files and gives a parser (and allows for plugins), so you don't need to do as much work (you can just use contentlayer and not worry about nextjs's mdx thingy)
BirmanOP
Interesting, thank you! I’ll take a look at this later today.
yeah, it takes a little to wrap you head around, but they have good docs, and i would say they are better in the long run 🙂
BirmanOP
Awesome thanks again!
BirmanOP
Hey Risky Down Under, didn't want to tag you however if you don't see this, I just might 😅
I looked at implementing Content Layer this morning. Got all of the config setup etc and it was generating files somewhat correctly.
A couple of issues I found are that my local server hangs if I run it as so
Another issue was if I ran the dev command for content layer to build the posts, and then the next dev command, it would show me all of the previews correctly but clicking on one would return a 'not-found'.
Just curious as to whether you've experience either of these problems before?
I looked at implementing Content Layer this morning. Got all of the config setup etc and it was generating files somewhat correctly.
A couple of issues I found are that my local server hangs if I run it as so
"dev":"contentLayer dev && next dev" which is a solution I came across on a gh issue. This builds the files but it never actually starts the server.Another issue was if I ran the dev command for content layer to build the posts, and then the next dev command, it would show me all of the previews correctly but clicking on one would return a 'not-found'.
Just curious as to whether you've experience either of these problems before?
Content Layer looks great. I’ve been using MDX Remote: https://github.com/hashicorp/next-mdx-remote
@Morgan Content Layer looks great. I’ve been using MDX Remote: https://github.com/hashicorp/next-mdx-remote
BirmanOP
Nice! How does that play with the app directory?