Is it possible to use markdoc with Nextjs 13 Pages and Layout inside the appDir?

[ZYJLiu]

Are there any references for using markdoc with the Nextjs 13 App Directory feature?

Trying to referencing the "Using Markdoc with Next.js" example from the docs (https://markdoc.dev/docs/nextjs), but am unsure how to set up the files for a Layout (https://beta.nextjs.org/docs/routing/pages-and-layouts#layouts) in the App Directory to wrap around the pages generated by markdoc.

[mfix-stripe]

@ZYJLiu not at the moment, but we would love help from the community for coming up with a Next.js 13 example.

I don't imagine there would be any constraints (just put your Markdoc pages in app/ instead of pages/), but there might be some unforeseen things about Next.js 13 that don't work with our dependencies (e.g. we rely on Next.js's Webpack config to parse and bundle the Markdoc documents). I am not sure yet.

Please let me know if you try to integrate with next@13 and see what issues you run in to.

[dylanmeivis]

Hi @mfix-stripe I recently started a project and used the experimental app with app folder structure. Wanted to use Markdoc but read and figured out that the plugin was not yet supported. I still wanted to use the app dir for my pages and layout etc so figured out a solution to get it working for my project. I created an starter example project with the solution that I used. It's not yet the most beautiful solution but works perfectly for me.

I tried to use all the provided next features to optimize it like: generateStaticParams, generateMetadata and the new data fetching methods.

See the repository here: https://github.com/dylanmeivis/nextjs13-starter-markdoc#readme

[mfix-stripe]

@dylanmeivis thanks for sharing! If you are able to update our @markdoc/next.js plugin to support Next.js apps that use either pages/ or app/, that would be very much appreciated 🙏 .

[bvaughn]

I'm curious if this was ever finished.

(I'm currently trying to figure out how to use generateMetadata to display a dynamic page title for markup pages.)

[mfix-stripe]

Hey Brian, I don't believe so. If you are already creating a javascript/typescript page in order to use generateMetadata, you can use @markdoc/markdoc directly, and that will work for you.

@markdoc/next.js basically just adds Next.js-like file-based configuration for Markdoc, but isn't required to use Markdoc in a Next.js app.

[sathishkannan162]

Support for app router has been added on @markdoc/next.js. See PR markdoc/next.js#30