Next-plugins: using a wrapper component in MDX

[charliewilco]

i'm working with the layout part of MDX and this isn't working. my endgoal is to have the component in pages/index.tsx automatically be wrapped in the layout styled-component.

and this setup isn't working:

// components/layout.tsx

import styled from 'styled-components';

export default styled.div`
  padding: 16px;
  margin-bottom: 16px;
  font-family: system-ui;
  background: #f2f2f2;
  color: #4f4f4f;
`;

// docs/typography.mdx

import Layout from '../components/layout'

export default Layout

## Overview

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum massa ex, vestibulum vitae urna quis, maximus faucibus nisi. Nunc aliquet nec ligula sit amet dignissim. Fusce sed auctor urna. Nulla facilisi. Curabitur sed maximus tellus. Nulla a turpis euismod quam iaculis hendrerit. Morbi nec eros pharetra, pellentesque tortor vitae, efficitur est.

// pages/index.tsx
import Typography from '../docs/typography.mdx'

export default () => (<Typography />)

// next.config.js
const withTypescript = require('@zeit/next-typescript');

const withMDX = require('@zeit/next-mdx')({
  extension: /\.mdx?$/
});

module.exports = withTypescript(withMDX());

---

Is there something I'm missing between the spec and my implementation? The react dev tools show that the component Layout={StyledComponent} attached to the MDX component.

[timneutkens]

Maybe it's not rendering it's children? I'm not sure 🤔 Should work fine if it's passed into mdxtag like you're saying. Could you make a GitHub repository for this code so I can have a look.

[charliewilco]

@timneutkens sure thing! https://github.com/charliewilco/typescript-next-mdx

[charliewilco]

okay i resolved this on my end, explicitly adding @mdx-js/tag@latest resolved this, maybe there's a version mismatch somewhere in the various dependencies

mdx + next.js is just awesome BTW

[vixalien]

Hello anybody is there anyway we can use next.js without importing and exporting layout on every file. I saw you can do "transclusion.", is it possible to do something like:

// some-api-endpoint/[slug].jsx
import Slug from `./${slug}.md`
export default <Slug>

[gaelhameon]

@vixalien I think this could help you: https://nextjs.org/docs/advanced-features/custom-app

If you create a _app.js file with this content:

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

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

All of your pages will be wrapped in your Layout

[vixalien]

sorry but I was meaning a layout only for some specific files maybe like a layout for pages in some folder.