How can I make markdoc with Next.js work like mdx with Next.js? about markdoc HOT 3 CLOSED

@francisfeng you need to pass in the props from pageProps (as demonstrated here)

<Component {...pageProps} />

from markdoc.

@francisfeng you need to pass in the props from pageProps (as demonstrated here)

<Component {...pageProps} />

I think it’s a little more than that. As you can see in my _app.js, if I open localhost:3000, the console will print out an empty object with pageProps.

These is no markdoc property in MyApp component.

// _app.js
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  console.log(pageProps)
  return <Component {...pageProps} />
}

export default MyApp

But if I change index.js to index.md, now the console will print out an object with markdoc property.

The thing is I want index.js instead of index.md.

from markdoc.

I'm in the same situation.

My current workaround:

In _app.tsx:

function MyApp({ Component, pageProps }: AppProps) {
  // Check if it's loading a .md file:
  if ("markdoc" in pageProps) {
    // add <Layout>, etc wrappers/logic:
    return (
      <MyLayout>
        <Component {...pageProps} markdoc={pageProps} />
      </MyLayout>
    )
  }

  // My other pages can handle layout logic, etc in their `index.tsx` files:
  return <Component {...pageProps} markdoc={pageProps} />
}

from markdoc.