Skip to main content

logo of hannah's blog

Using KaTex in markdown with Next.js 13 app router

Learn how to use math equations in MDX files on the Next.js 13 app router (directory) environment.

2 min.

  • Math
  • Next.js
  • Contentlayer
  • Markdown

In this tutorial, we’ll use Contentlayer to source the files and use KaTex to render math typesettings.

step 1. Install packages

Let's start by installing the required packages:

1. contentlayer

To simplify the process, we'll install a basic form of Contentlayer. Thus here are more details on installing Contentlayer.

yarn add contentlayer next-contentlayer
# or
npm install contentlayer next-contentlayer

Here, remark-math handles parsing math equations, including rehype-katex. rehype-katex transforms the parsed equations into HTML with KaTex formatting.

2. remark-math and rehype-katex

yarn add remark-math rehype-katex
# or
npm install remark-math rehype-katex

step 2. Configure contentlayer

Then set up next.config.js to wrap configuration options. The contentlayer.config.js configures Contentlayer to ensure your markdown files are processed correctly.

next.config.js
const { withContentlayer } = require('next-contentlayer')
module.exports = withContentlayer({})
contentlayer.config.js
import { defineDocumentType, makeSource } from 'contentlayer/source-files'
import remarkMath from 'remark-math'
import rehypeKatex from 'rehype-katex'
 
export const Post = defineDocumentType(() => ({
  name: 'Post',
  filePathPattern: `**/*.mdx`,
  contentType: 'mdx',
  fields: {
    title: {
      type: 'string',
      description: 'The title of the post',
      required: true,
    },
  },
}))
 
export default makeSource({
  contentDirPath: 'posts',
  documentTypes: [Post],
  mdx: {
    remarkPlugins: [remarkMath],
    rehypePlugins: [rehypeKatex],
  },
})

In Next.js 13, CSS files will be applied automatically without additional scripts.

step 3. Add LaTex text to .mdxdocument

Now, let’s create a new mdx file to check if the installations are successful.

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

step 4. Render on a page

Since we’re using app directory, let’s create page.tsx in app > blog > [slug],

page.tsx
import { allBlogs } from '@/root/.contentlayer/generated'
import { useMDXComponent } from 'next-contentlayer/hooks'
 
export type MdxProps = {
  code: string
}
 
export const MdxRenderer = ({ code }: MdxProps) => {
  const Component = useMDXComponent(code)
 
  return (
    <Component />
  )
}
 
 
export default async function BlogPost({ params }: { params: any }) {
  const post = allBlogs.find((post) => post.slug === params.slug)
 
  return (
    <section className="blog-post">
      <MdxRenderer code={post.body.code} />
    </section>
}

Katex rendered And Voilà! We finally just rendered our math equations.