JAVASCRIPT

render markdown in nextjs

// Render Markdown in Next.JS + React:
import ReactMarkdown from 'react-markdown';

export default function ThePage() {
  const markdown = `## _The Last Markdown Editor, Ever_`;
  return <ReactMarkdown source = { markdown } />
}

nextjs markdown

// pages/index.js

import { MDXProvider } from '@mdx-js/react';
import Image from 'next/image';
import { Heading, Text, Pre, Code, Table } from '../components';

const ResponsiveImage = (props) => (
  <Image alt={props.alt} layout="responsive" {...props} />
);

const components = {
  img: ResponsiveImage,
  h1: Heading.H1,
  h2: Heading.H2,
  p: Text,
  code: Pre,
  inlineCode: Code,
};

export default function Post(props) {
  return (
    <MDXProvider components={components}>
      <main {...props} />
    </MDXProvider>
  );
}