I followed all the steps in the docs to use mdx

first installed all the deps

npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx

then confirgured the next config file

import createMDX from "@next/mdx"

/** @type {import("next").NextConfig} */

const nextConfig = {
  pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
}

const withMDX = createMDX({})

export default withMDX(nextConfig)

then added the mdx components file in the root of my project
mdx-components.tsx:

import type { MDXComponents } from 'mdx/types'
 
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  }
}

then after all that I tried using mdx

content.mdx:

---
title: "tos content"
---

terms of service content

page.tsx:

import Content from "./content.mdx"
import styles from "styles/legal/tos.module.css"

export default function TOS() {

  return (
    <div className={styles.container}>
      <div>
        Terms of Service
      </div>
      <Content />
    </div>
  )
}

but an error rises and it says:

⨯ ReferenceError: Content is not defined
    at TOS (project\.next\server\chunks\[root of the server]__2da40a._.js:773:270)
    at stringify (<anonymous>)