Next.js App RouterでKatexのCSSをimportしたい

September 28, 2023

前提

Next.jsのApp Routerを使って、 $\TeX$ の数式をMarkdown内で書いてブログ記事を生成したい
remark-mathやrehype-katexを使う

const processedContent = await unified()
  .use(remarkParse)
  .use(remarkMath)
  .use(remarkGfm)
  .use(remarkRehype)
  .use(rehypeKatex)
  .use(rehypeHighlight)
  .use(rehypeStringify)
  .process(matterResult.content);
const contentHtml = processedContent.toString();

問題

Katexにはheadにstylesheetを入れろと書いてある

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css" integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn" crossorigin="anonymous">
</head>

が、Next.jsのApp Routerではheadを自由に編集できない
- Metadata API
Issueにもなってた
<link rel="stylesheet" />はUnsupportedとのこと

解決策

layout.tsxでimport 'katex/dist/katex.min.css'した

React Markdownでやってたやり方

最初からReact Markdown使えよという話かもしれない

前提

問題

解決策