Put each MDX file content inside a containter

  • npm install recma-mdx-is-mdx-component
  • https://github.com/mdx-js/mdx/issues/368#issuecomment-2548318709

I want to put each MDX file content inside a Bootstrap <Container>. Since, I'm using Next.js, I need to modify the _app.jsx file to conditionally wrap the MDX content in a <Container>.

//_app.jsx
import 'bootstrap/dist/css/bootstrap.min.css';
import Container from 'react-bootstrap/Container';

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

    return (
        {
            Component.name == 'MDXContent' 
            ? 
                <Container className={`p-5 rounded-3 border border-3`}>
                    <Component {...pageProps} />
                </Container>
            : 
                <Component {...pageProps} />
        }

    );
}