Simple MDX blog that loops through posts.

[tr1s]

Can someone help point me to a simple MDX blog that loops through posts?

I tried converting the Next.js learning blog example into MDX but it's not as simple as I thought. And the MDX blogs I'm finding online are either really bloating and complex, or are too simple and aren't looping over posts or getting static paths or anything useful. I'm just really confused on this process and what different tools I need (like does frontmatter not work?).

Even a good blog post would be greatly appreciated, thanks!

[rafaelalmeidatk]

I think the blog-starter example is what you are looking for: https://github.com/vercel/next.js/tree/canary/examples/blog-starter

[tr1s]

MDX not MD.

[rafaelalmeidatk]

Oh, ops 😅 Sorry, I haven't worked with MDX yet

[tr1s]

No prob, thanks anyways!

[IanMitchell]

I'm also running into roadblocks with this. Front matter doesn't work with the built-in @next/mdx package, and per Tim in #8857 it won't be added - been trying to use some other packages I've found but had little success with them. I'm not sure if they're meant to be used with getStaticProps and getStaticPaths though, so might be using them incorrectly.

[rafaelalmeidatk]

I have been playing with MDX to create my blog and this was my experience:

First I tried to create a posts folder with all the .mdx posts in the root of the repo and import them in a dynamic route like pages/blog/[slug].tsx. I spent some time trying to make it work then I realized I could just use MDX pages directly, like this: pages/blog/hello-word.mdx. The good part is that it works perfectly with hot reloading.

The post file is like this:

import Post from '../../components/Post';

export const meta = {
  title: 'Title of the post',
  description: 'The description',
  date: '2020-01-01',
};

export default Post;

The content of the post _starts here_

This Post component is the page layout, it will receive the content of the post in the children prop and the meta prop with this object the mdx page is exporting. You can see all the content of the component here: https://github.com/rafaelalmeidatk/rafaelalmeidatk.com/blob/5e990d191994ed418c356f5fb1edea7c43213e3f/src/components/post/Post.tsx#L29

To show the list of posts, I adapted the code from the blog-starter example, it basically reads the folder that contains the posts to get the filenames (that are the posts slugs) and return the metadata of these posts: https://github.com/rafaelalmeidatk/rafaelalmeidatk.com/blob/5e990d191994ed418c356f5fb1edea7c43213e3f/src/lib/posts.ts#L33

[IanMitchell]

I've got this partially working using ReactDOMServer.renderToString() in getStaticProps but it comes with the drawback of not hydrating on render - working on a way to overcome that limitation @tr1s and will post a working example once I have one!

[tr1s]

Sounds good!

[IanMitchell]

Still no luck @tr1s, sorry! Found https://github.com/hashicorp/next-mdx-remote as an option, but the caveat where you can't import was a dealbreaker for my use case unfortunately. Trying to see if I can wrangle it to work