RyanWarner / next-mdx-digital-garden-starter

An opinionated starting point for Digital Garden content authoring.

🌱 Next + MDX Digital Garden Starter

An opinionated starting point for Digital Garden content authoring.

Note: This setup does not handle code-splitting. I tried switching to mdx-bundler but could not get it to work.

Getting started

npm install
npm run dev

Use

• Write MDX in the content directory.
• Put components in the components directory.
• Use components in MDX (without imports).

Goals

Statically generated pages from MDX files that are not tied to the filesystem path

How it works

• [slug].js generates static paths using getStaticPaths from all .mdx files located in the specified directory (content/ by default).
• The getStaticProps NextJS method passes the MDX content including front-matter (parsed with gray-matter) to the <PostPage /> component to be rendered.
• The index or home page uses similar logic to generate a list of posts sorted by date.

TODO

• Support filesystem-based routing as an option
• Add some batteries-included examples
• Write a tutorial