Next.js + Markdown + GraphQL

[adamsoffer]

Gatsby has a really great plugin called gatsby-transformer-remark that allows you to query markdown files using graphql. How can something similar be achieved with Next.js? I'm keen on using next.js + open authored markdown for my next jamstack site, but I want that graphql goodness!

Perhaps something similar can be unlocked once support for plugins lands.

[timneutkens]

The Next.js docs use markdown fetched from an external source (GitHub in a different repo): https://github.com/zeit/next-site/blob/master/pages/docs/%5B...slug%5D.js#L136-L148

[adamsoffer]

Oh sweet I didn't realize the zeit site was open-sourced. This will be a good reference for me as I build my markdown powered site :)

Using the next plugin system that's currently an RFC, would we, in theory, be able to create something similar to the gatsby-transformer-remark? Would love to see a next-transformer-remark plugin. Or any number of data sourcing plugins that let you query sourced data via graphql such as next-source-prismic, next-source-wordpress, etc

[timneutkens]

So if you look at these specific lines: https://github.com/zeit/next-site/blob/master/pages/docs/%5B...slug%5D.js#L143-L145

You don't really need GraphQL for this, it can just be a library published to npm that parses and transforms markdown the way that you want it to.

Anything used in getStaticProps is tree-shaken from browser bundles so you can basically do any processing in there 🙏

Basically all you need a good JavaScript SDK for the CMS and you're good to go, here's an example for datocms for example: #10567