CODEWITHSUNDEEP
javascriptreactjsnext.jsmdxjs
Paul DeVito
Paul DeVito

Reputation: 1912

Setting MDX Component Props in NextJS

So I am working on a layout system in my next app based on Adam Wathan's method and his tailwlind website. I have it working for js files, but can't seen to get the syntax for doing it in mdx files.

The way it works is using an _app.js like so:

import '../styles/tailwind.css'
import { useState, useEffect, Fragment } from 'react'
import Head from 'next/head'

function MyApp({ Component, pageProps, router }) {

  const Layout = Component.layoutProps?.Layout || Fragment
  const layoutProps = Component.layoutProps?.Layout
    ? { layoutProps: Component.layoutProps}
    : {};

  return (
    <>
      <Layout {...layoutProps}>
        <Component {...pageProps} />
      </Layout>
    </>
  )
}

export default MyApp

Then, in my js files, I can do something like so:

import React from 'react'
import { DocumentationLayout } from 'src/layouts/DocumentationLayout'
import Link from 'next/link'

export default function DocsLandingPage() {
  return (
    <div>
      docs landing page
    </div>
  )
}

DocsLandingPage.layoutProps = {
  meta: {
    title: 'Documentation',
  },
  Layout: DocumentationLayout,
}

Where I set layoutProps to the appropriate layout and the js page will then have that applied.

My problem is, if I have an mdx file like so, (I believe) I have the import syntax correct to get the layout components, but I can't figure out how to pass it as a prop similar to how I'm doing it from my js files. Any thoughts?


import { DocumentationLayout as _Layout } from 'src/layouts/DocumentationLayout'

install instructions tbd

***SOME KIND OF PROPS ASSIGNMENT HERE***

Upvotes: 0

Views: 880

Answers (1)

Paul DeVito
Paul DeVito

Reputation: 1912

something like this seems to do the trick

export default ({ children }) => <DocumentationLayout children={children}></DocumentationLayout>

Upvotes: 0

Related Questions