How to extend MDX with custom layouts on Shipixen

Navigate to your Shipixen project and create a new file in components/layouts/CustomLayout.tsx. Define your layout component with props for children and frontMatter:

export default function CustomLayout({ children, frontMatter }) {
  return (
    <div className="custom-layout">
      <header>{frontMatter.title}</header>
      <main>{children}</main>
    </div>
  )
}

Open next.config.js and add your custom layout to the MDX configuration. Import your layout and include it in the components object:

import CustomLayout from './components/layouts/CustomLayout'

const withMDX = require('@next/mdx')({
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
  }
})

module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'mdx', 'md', 'ts', 'tsx']
})

Create or update components/MDXComponents.tsx to map layout names to components. This allows you to specify layouts in MDX frontmatter:

import CustomLayout from './layouts/CustomLayout'
import DefaultLayout from './layouts/DefaultLayout'

const layoutComponents = {
  custom: CustomLayout,
  default: DefaultLayout
}

export default layoutComponents

In your pages/_app.tsx or create a new components/LayoutWrapper.tsx, add logic to dynamically select layouts based on frontmatter:

import layoutComponents from '../components/MDXComponents'

function LayoutWrapper({ children, frontMatter }) {
  const Layout = layoutComponents[frontMatter.layout] || layoutComponents.default
  return <Layout frontMatter={frontMatter}>{children}</Layout>
}

Add the layout property to your MDX files' frontmatter to specify which custom layout to use:

---
title: "My Custom Page"
layout: "custom"
description: "Page using custom layout"
---

# Your MDX Content Here

This page will use the CustomLayout component.

Add CSS styles to your custom layout either through CSS modules, styled-components, or Tailwind classes. Create styles/CustomLayout.module.css and import it in your layout component:

import styles from '../../styles/CustomLayout.module.css'

export default function CustomLayout({ children, frontMatter }) {
  return (
    <div className={styles.container}>
      <aside className={styles.sidebar}>Navigation</aside>
      <main className={styles.content}>{children}</main>
    </div>
  )
}

Run npm run dev to test your custom layouts locally. Navigate to pages using your custom layout and verify they render correctly. Check responsive behavior and ensure all frontmatter data displays properly. Deploy using Shipixen's deployment options when satisfied with the results.