Second one

I thought that yarn - it's not as simple as just yarn create next-app --example $COOL_MXD_BUNDLER_DEMO but it does not exist.

So I've been poking at the docs and seen how it can (and it is simple, even I glossed over it the first time looking at the readme).

const coolString = `
# some markdown

hello!

1. list 1
2. list 2
`
const res = await bundleMDX(coolString)

// this will emit a long string with a minified component definition
// and the content mapped to code that will render the children
console.log(res.code)

ah what the hell, here's the whole thing:

var Component=(()=>{var c=Object.create;var a=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var i=n=>a(n,"__esModule",{value:!0});var d=(n,t)=>()=>(t||n((t={exports:{}}).exports,t),t.exports),u=(n,t)=>{i(n);for(var e in t)a(n,e,{get:t[e],enumerable:!0})},x=(n,t,e)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of p(t))!j.call(n,r)&&r!=="default"&&a(n,r,{get:()=>t[r],enumerable:!(e=l(t,r))||e.enumerable});return n},f=n=>x(i(a(n!=null?c(m(n)):{},"default",n&&n.__esModule&&"default"in n?{get:()=>n.default,enumerable:!0}:{value:n,enumerable:!0})),n);var h=d((w,o)=>{o.exports=_jsx_runtime});var b={};u(b,{default:()=>g});var s=f(h());function _(n){let t=Object.assign({hr:"hr",h2:"h2",h1:"h1",p:"p"},n.components),{wrapper:e}=t,r=(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.hr,{}),`
`,(0,s.jsx)(t.h2,{children:"title: cool thing"}),`
`,(0,s.jsx)(t.h1,{children:"this is just simple-old markdown, first of all"}),`
`,(0,s.jsx)(t.p,{children:"like. a paragraph, easy stuff."})]});return e?(0,s.jsx)(e,Object.assign({},n,{children:r})):r}var g=_;return b;})();

I've found two tutorials people have written about setting up mdx-bundler and next and I'm realizing ... slowly .. is that generally the markdown files aren't stored in the in the pages directory. Instead of saying: "ok, this page here with a .mdx extension? that should be treated as markdown.", you use Next's dynamic routes - /path/[post-id].js & look up and parse a file from another dir, and that is where the mdx processing comes into play.

Two articles that talk about setting up next w/ mdx-bundler

So that's a a pattern I can copy, sure.

I was definitely hoping that it'd be an easy & fast setup with not too much coding that this step.

So what I'll need to do is:

  1. write a little function that reads the file,
  2. passes it to bundleMDX
  3. and somehow makes related components

Alas..

follow up

I didn't want to just straight-up copy Dipesh's setup ... but I totally did.

and I did get a markdown version of my page rendering! no styles or components, yet..

a few things I learned: