Alternative implementation

See discussion in remcohaszing/remark-mdx-frontmatter#14

next.config.js

@@ -2,15 +2,16 @@
 module.exports = async () => {
   const nextMDX = require('@next/mdx');
   const recmaMdxDisplayname = require('recma-mdx-displayname');
-  const recmaMdxFrontmatter = require('recma-mdx-frontmatter');
+  const recmaNextjsStaticProps = (await import('recma-nextjs-static-props')).default;
+  const remarkMdxFrontmatter = (await import('remark-mdx-frontmatter')).default;
   const remarkFrontmatter = (await import('remark-frontmatter')).default;
   const remarkGfm = (await import('remark-gfm')).default;
 
   const withMDX = nextMDX({
     extension: /\.mdx?$/,
     options: {
-      recmaPlugins: [recmaMdxDisplayname, recmaMdxFrontmatter],
-      remarkPlugins: [remarkFrontmatter, remarkGfm],
+      recmaPlugins: [recmaMdxDisplayname, recmaNextjsStaticProps],
+      remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter, remarkGfm],
     },
   });
 

package.json

@@ -25,9 +25,10 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "recma-mdx-displayname": "^0.4.0",
-    "recma-mdx-frontmatter": "^1.0.0",
+    "recma-nextjs-static-props": "^2.0.0",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
+    "remark-mdx-frontmatter": "^4.0.0",
     "tailwindcss": "^3.2.4",
     "typescript": "4.9.4",
     "zod": "^3.22.4"

pages/_app.tsx

@@ -13,13 +13,13 @@ const App: React.FC<AppProps> = ({ Component, pageProps }: AppProps) => {
   );
 
   if (Component.displayName === 'MDXContent') {
-    if ('frontmatter' in Component && typeof Component.frontmatter === 'object' && Component.frontmatter !== null && 'title' in Component.frontmatter) {
+    if ('frontmatter' in pageProps) {
       return (
         <>
           {common}
           <ProsePage>
             <article itemScope itemType="https://schema.org/BlogPosting">
-              <BlogHeader frontmatter={Component.frontmatter} />
+              <BlogHeader frontmatter={pageProps.frontmatter} />
               <div itemProp="articleBody">
                 <Component {...pageProps} />
               </div>

pages/blog/example-post.mdx

@@ -0,0 +1,6 @@
+---
+title: 'An example post'
+publishedAt: '2024-01-16'
+---
+
+This is an example blog post