How can we integrate .mdx files using new SSG functions?

[NateRadebaugh]

How can we integrate .mdx files using the new SSG functions?

I've tried using these examples, but there's some glue missing to set up a blog with custom files, gray-matter, etc.:

• http://github.com/timer/blog
• https://github.com/zeit/next.js/tree/canary/examples/with-mdx

If we try to replicate a setup like https://github.com/kentcdodds/kentcdodds.com (uses gatsby) are we missing some functions, or am I just missing an example that wires it all up?

[timneutkens]

Just using https://github.com/zeit/next.js/tree/canary/examples/with-mdx should be enough 🤔 MDX gets compiled to JSX and is rendered as-is, so getStaticProps is not needed.

[NateRadebaugh]

Thanks, but what's the pattern for wrapping markdown pages in another layout there? If I want just "/blog" pages to have one layout vs other pages in the site, do I do some URL-detection in _app and use different wrappers?

[Janpot]

Yeah, struggled with the same problem. In the end I went with this but it's not suitable for every use case. Only when your resulting markup is truly static (not "it needs to be hydrated to be actually functional"-static).

[leerob]

Check out next-mdx-enhanced. This will allow you to have different MDX layouts for separate sections of the site. Since you're not using getInitialProps or getServerSideProps, the pages will be compiled to static pages anyway. No need to work about getStaticProps. Example.

[NateRadebaugh]

Thanks @leerob this is pretty cool. It's a bit clunky to pre-process parts of the page eg "prev" vs "next" posts, but did manage to get it working how I wanted via:

// import
import { frontMatter as docsPages } from "../pages/blog/*.mdx";

// then:
function PostLayout(frontMatter) {
  //
  // I'd like all of this to be run one-time at build-time
  // since it could be a lot of processing when loading
  // a single post
  //
  const slug = getSlug(frontMatter.__resourcePath);
  const posts = docsPages;

  const pageInfo = posts.map((d) => {
    return {
      slug: getSlug(d.__resourcePath),
      date: dayjs(d.date),
      title: d.title,
    };
  });

  // Sort
  pageInfo.sort((a, b) => {
    const aDate = a.date;
    const bDate = b.date;

    return aDate.isBefore(bDate) ? 1 : -1;
  });

  const postIndex = pageInfo.findIndex((p) => p.slug === slug);

  const prevPost = pageInfo[postIndex + 1];
  const nextPost = pageInfo[postIndex - 1];

[ghost]

[Janpot]

The point of my example is that it can dynamically load mdx from getStaticProps/getStaticPaths