Fetching markdoc props inside the next app router

[sathishkannan162]

What happened?

This issue is with @markdoc/nextjs.
In the pages router, we have the ability to get access to some markdoc properties via pageProps which we can use it to build const components like table of contents etc...
Example:

// pages/_app.js

import Layout from '../components/Layout';

export default function App({ Component, pageProps }) {
  return (
    <Layout frontmatter={pageProps.markdoc.frontmatter}>
      <Component {...pageProps} />
    </Layout>
  );
}

How to get access to those properties in app router.

To reproduce

This is not a bug but a needed feature that is available in pages router but not in app router. This makes the ability to migrate from pages router to app router difficult.

Version

0.3.4

Additional context

No response

[mfix-stripe]

I don't believe you can access pageProps anymore when using the app router: https://stackoverflow.com/questions/76197948/when-migrating-from-a-page-router-to-an-app-router-how-should-app-js-props-be, regardless of using Markdoc or not.

However, if you need to access the values passed to the Component, then you can try creating a custom document Node which will have access to values you might need.

@bradlc have you ran into this? Do you have other suggestions?

[arranf]

This is a hard blocker for me as well. Previously using pages building Tables of Contents, headings sidebars, etc. was quite easy.

Now it's quite problematic! I wonder if it'd be possible to change the nextjs plugin's exported code to use a React Context to store this information and make it available to parent components?