Hello from Markdown (.mdx file)

Remember to:

• install the necessary packages

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

• Create a mdx-components.tsx file at the root of your application:

import type { MDXComponents } from 'mdx/types'

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  }
}

• Update the next.config.js file:

const withMDX = require('@next/mdx')()

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Configure `pageExtensions` to include MDX files
  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
  // Optionally, add any other Next.js config below
}

module.exports = withMDX(nextConfig)

This is a paragraph

This is bold text

this is a code block

This is italic text

This is a list:

• item 1
• item 2
• item 3

This is a heading

MDX can also import JSX Components!