Import Components to MDX

In a Next.js project using MDX and the @next/mdx package, you can import custom components directly into your MDX files to enhance the rendering of Markdown content. This allows you to use React components within your Markdown documents, providing dynamic and interactive elements.

Example: Importing a Button Component

markdownCopy
import { Button } from "@/components/ui/button";

<div className="pb-4">
  <Button>Click Me</Button>
</div>

Other components can be imported and used within MDX files by customizing the rendering behavior. The useMDXComponents function is a custom hook designed to provide custom React components for rendering MDX content. This function allows you to override the default MDX components with your own, providing custom styling and behavior.

The mdx-components.tsx file is created to define and provide custom React components for rendering MDX content. This file ensures that when MDX files are processed, the elements within those files are rendered using the specified custom components rather than the default ones. For example, you can create a custom h1 component that adds a specific style to all level 1 headings in your MDX files. You can also define custom components for code blocks, inline code, and other Markdown elements. These elements can be styled using Tailwind CSS or other styling frameworks to match your website's design. Further you can include other componetents and / or custom components to this document and those components will be imported by default for convenient use in your mdx documents, for example the <YouTube> component included below.

tsxCopy
// Path: /mdx-components.tsx
import React from "react";
import type { MDXComponents } from "mdx/types";
import YouTube from "@/components/mdx/youtube";
import Code from "@/components/mdx/code";
import InlineCode from "@/components/mdx/inline-code";
import Pre from "@/components/mdx/pre"; // Adjust the import path as needed
import { Button } from "@/components/ui/button";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
    YouTube,
    pre: Pre, // Use the custom Pre component
    code: (props) => {
      const { className, children } = props;
      if (className) {
        return <Code {...props} />;
      }
      return <InlineCode>{children}</InlineCode>;
    },
    h1: (props) => <h1 className="text-4xl font-black pb-4" {...props} />,
    h2: (props) => <h2 className="text-3xl font-bold pb-4" {...props} />,
    h3: (props) => <h3 className="text-2xl font-semibold pb-4 " {...props} />,
    h4: (props) => <h4 className="text-xl font-medium pb-4" {...props} />,
    h5: (props) => <h5 className="text-lg font-normal pb-4" {...props} />,
    h6: (props) => <h6 className="text-base font-light pb-4" {...props} />,
    p: (props) => <p className="text-lg mb-4" {...props} />,
    li: (props) => <li className="pb-1" {...props} />,
    ul: (props) => <ul className="list-disc pl-6 pb-4" {...props} />,
    ol: (props) => <ol className="list-decimal pl-6 pb-4" {...props} />,
    hr: (props) => <hr className="my-4" {...props} />,
    blockquote: (props) => (
      <blockquote
        style={{ paddingBottom: 0 }}
        className="border-l-4 pl-4 my-4"
        {...props}
      />
    ),
  };
}

In the example above, the useMDXComponents function is defined to provide custom components for rendering MDX content. The function takes the default MDX components as an argument and returns an object with the custom components. The custom components include a custom YouTube component, Code component, InlineCode component, Pre component, and custom styling for headings, paragraphs, lists, blockquotes, and horizontal rules.

To use the custom components in your MDX files, you need to import the useMDXComponents function and pass it to the `

component provided by@mdx-js/react`. This component wraps the MDX content and applies the custom components to the rendered elements.

markdownCopy
<YouTube id="aqz-KE-bpKQ" />