Copy /**
 * pages/blog/[...slug].js
 *
 */
import { MDXRemote } from 'next-mdx-remote'
import { serialize } from 'next-mdx-remote/serialize'

import rehypeHighlight from 'rehype-highlight'
import rehypeMathjax from 'rehype-mathjax'
import rehypeKatex from 'rehype-katex'
import remarkMath from 'remark-math'

import 'katex/dist/katex.min.css'

const options = {
  mdxOptions: {
      remarkPlugins: [remarkMath],
      rehypePlugins: [rehypeKatex, rehypeHighlight, rehypeMathjax],
  }
}

export default function BlogPost({ source }) {
  return <MDXRemote {...source} options={options} />
}

export async function getStaticProps({ params }) {
  const { slug } = params
  const source = `# Hello, world! $x^2 + y^2 = z^2$`
  const mdxSource = await serialize(source, options)

  return {
    props: {
      source: mdxSource,
    },
  }
}

Copy 
/**
 * components/layout/index.js
 * 
 * You may wanna copy the katex.min.js file to your public/js folder
 * cp node_modules/katex/dist/katex.min.js public/js/katex.min.js
 */

export default function Layout() {
  return (
    <div>
      <Header />
      <main>
        {children}
      </main>
      <Footer />
      {/* Inject katex.min.js here*/}
      {/*<script
        type="text/javascript"
        src="/js/katex.min.js"> */}
    </div>
  )
}

Copy /**
 * next.config.js
 * 
 * we want to copy the katex dist files to the public folder
 * It may not necessarily work for you, but you can try it out
 */

const CopyPlugin = require('copy-webpack-plugin')

module.exports = {
  webpack: (config) => {
    config.plugins = config.plugins || []
    config.plugins.push(
      new CopyPlugin({
        patterns: [
          { from: 'node_modules/katex/dist/katex.min.css', to: 'public/css/katex.min.css' },
          { from: 'node_modules/katex/dist/katex.min.js', to: 'public/js/katex.min.js' },
        ],
      })
    )

    return config
  }

Copy $x^2 + y^2 = z^2$

Copy // you can import it in the layout file
import 'katex/dist/katex.min.css'
// or import it in the page file

Copy 
$\frac{d}{dx} \left( e^{x^2} \right) = 2x e^{x^2}$

Copy The **Pythagorean equation**: $a=\sqrt{b^2 + c^2}$.
 
$P → Q ⟺ ~Q → ~P$
 
$(n + 1)^2 ≥ 2^n$

$$x = \frac{-b \pm \sqrt{b^{2} - 4ac}}{2a}$$

Copy Server Error
ReferenceError: cases is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Copy Styled-components getting Expecting Unicode escape sequence \uXXXX

Copy TypeError: Cannot read properties of undefined (reading 'mathFlowInside')

Copy ```math
\begin{cases}
2x + y = 7 \\
x - y = 1
\end{cases}
```

Copy \[
\begin{cases}
2x + y = 7 \\
x - y = 1
\end{cases}
\]

Copy $$ \( x \)$$