Embedded MDX example

This example shows how to embed MDX snippets that can be stored loosely and rendered on demand as a small part of a page. Unlike doc and blog pages that will be mostly MDX content, these smaller snippets might exist only in portions of a page: like a homepage where we're showing code.

By using const numbers = [1, 2, 3] instead of client side syntax highlighting we can ensure the code is a lot better formatted and can utilize MDX components (think tabs) that we might use in the larger doc pages


import { Box, Container, Flex, Text } from '@chakra-ui/react';
import fs from 'fs';
import { getMDXComponent } from 'mdx-bundler/client';
import Head from 'next/head';
import { useEffect, useMemo } from 'react';
import { Button } from '~/components/button';
import { BaseLayout } from '~/components/layouts/base';
import { compileMDX, componentsForMDX } from '~/utils;';
/* const result = await bundleMDX({ source: exampleMDX }); const { code, frontmatter } = result; */
export default function Home({ code }: { code: string }, frontmatter) {
  /* const { code, frontmatter } = parseMDX();
  const Component = useMemo(() => getMDXComponent(code), [code]); */
  const Component = useMemo(() => getMDXComponent(code), [code]);
  return (
      <Container maxW={1000}>
          <title>Create Next App</title>
          <link rel="icon" href="/favicon.ico" />
        <Flex gap={12}>
          <Box flexBasis="50%">
            <Component components={componentsForMDX} />
            <Text>This content over here is just part of the TSX page</Text>
export async function getStaticProps({ params }) {
  const data = fs.readFileSync('./snippets/test.mdx', 'utf-8');
  const { code, frontmatter } = await compileMDX(data);
  return { props: { code, frontmatter } };

This content over here is just part of the TSX page

Copyright © 2023 Xatabase Inc.
All rights reserved.


RoadmapFeature requestsPricingStatusAI solutions