How to use next-mdx-remote - 4 common examples

if (existsSync(leafPath)) {
    page = fs.readFileSync(leafPath, 'utf8')
    filePath = leafPath
  } else if (existsSync(indexPath)) {
    page = fs.readFileSync(indexPath, 'utf8')
    filePath = indexPath
  } else {
    // NOTE: if we decide to let docs pages render dynamically, we should replace this
    // error with a straight 404, at least in production.
    throw new Error(
      `We went looking for "${leafPath}" and "${indexPath}" but neither one was found.`
    )
  }

  const { data: frontMatter, content } = matter(page)
  const mdxSource = await renderToString(content, {
    mdxOptions: markdownDefaults({
      resolveIncludes: path.join(process.cwd(), 'content/partials'),
    }),
    components,
  })

  return { mdxSource, frontMatter, filePath: filePath.replace(`${root}/`, '') }
}

export async function getStaticProps({
  locale,
}: GetStaticPropsContext): Promise> {
  let content: Buffer;
  try {
    content = readFileSync(join("content", locale, "docs.mdx"));
  } catch (e) {
    content = readFileSync(join("content", "en", "docs.mdx"));
  }

  return {
    props: {
      content: await renderToString(content),
    },
  };
}

const Page = ({ content }) => {
  return (
    <div>
      
      <section>{hydrate(content)}</section>
    </div>
  );
};

export default function DocsPage({
  productName,
  productSlug,
  subpath,
  order,
  staticProps: { mdxSource, data, frontMatter, pagePath, filePath },
}) {
  const content = hydrate(mdxSource, {
    components: generateComponents(productName),
  })

  return (
    <>