NextJS 13.3.0集成Mathquill遇SSR问题求解决方案

一、修复react-mathquill的window is not defined错误 #

react-mathquill依赖浏览器环境的window对象，而NextJS的SSR阶段不存在该对象，因此需要仅在客户端渲染该组件，具体实现有两种方式：

1. 使用NextJS动态导入（推荐） #

通过next/dynamic导入组件并禁用SSR，确保组件仅在客户端加载：

import React, { useState, useEffect } from 'react'
import dynamic from 'next/dynamic'

// 动态导入EditableMathField，关闭SSR
const EditableMathField = dynamic(
  () => import('react-mathquill').then(mod => mod.EditableMathField),
  { ssr: false }
)

function Test() {
  const [latex, setLatex] = useState('\\frac{1}{\\sqrt{2}}\\cdot 2')
  const [stylesLoaded, setStylesLoaded] = useState(false)

  // 仅在客户端加载样式
  useEffect(() => {
    import('react-mathquill').then(mod => {
      mod.addStyles()
      setStylesLoaded(true)
    })
  }, [])

  // 样式未加载时显示占位
  if (!stylesLoaded) return <div>加载中...</div>

  return (
    <div>
      <EditableMathField
        latex={latex}
        onChange={mathField => setLatex(mathField.latex())}
      />
      <p>{latex}</p>
    </div>
  )
}

export default Test

2. 客户端环境判断导入 #

通过判断window是否存在，在客户端完成组件和样式的加载：

import React, { useState, useEffect } from 'react'

function Test() {
  const [latex, setLatex] = useState('\\frac{1}{\\sqrt{2}}\\cdot 2')
  const [mathQuillComp, setMathQuillComp] = useState(null)

  useEffect(() => {
    // 仅在客户端环境导入
    if (typeof window !== 'undefined') {
      import('react-mathquill').then(mod => {
        mod.addStyles()
        setMathQuillComp({ EditableMathField: mod.EditableMathField })
      })
    }
  }, [])

  if (!mathQuillComp) return <div>加载中...</div>
  const { EditableMathField } = mathQuillComp

  return (
    <div>
      <EditableMathField
        latex={latex}
        onChange={mathField => setLatex(mathField.latex())}
      />
      <p>{latex}</p>
    </div>
  )
}

export default Test

二、兼容NextJS的替代方案 #

如果react-mathquill配置繁琐，可选择以下方案：

1. KaTeX + react-katex（轻量LaTeX渲染） #

KaTeX渲染速度快、体积小，支持SSR，搭配react-katex可快速实现公式渲染，如需编辑功能可搭配普通输入框：

• 安装依赖：

npm install katex react-katex

• 示例代码：

import React, { useState } from 'react'
import { InlineMath, BlockMath } from 'react-katex'
import 'katex/dist/katex.min.css'

function Test() {
  const [latex, setLatex] = useState('\\frac{1}{\\sqrt{2}}\\cdot 2')

  return (
    <div>
      <textarea
        value={latex}
        onChange={e => setLatex(e.target.value)}
        placeholder="输入LaTeX公式"
      />
      <p>行内公式：<InlineMath math={latex} /></p>
      <p>块级公式：<BlockMath math={latex} /></p>
    </div>
  )
}

export default Test

2. MathJax（全功能LaTeX渲染） #

MathJax支持更复杂的公式语法，兼容SSR，可手动引入实现动态渲染：

import React, { useState, useEffect } from 'react'

function MathJaxRenderer({ latex }) {
  useEffect(() => {
    // 加载MathJax脚本（仅一次）
    if (!window.MathJax) {
      const script = document.createElement('script')
      script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js'
      script.async = true
      document.head.appendChild(script)
    } else {
      // 公式更新时重新渲染
      window.MathJax.typeset()
    }
  }, [latex])

  return <div>${latex}$</div>
}

function Test() {
  const [latex, setLatex] = useState('\\frac{1}{\\sqrt{2}}\\cdot 2')

  return (
    <div>
      <textarea
        value={latex}
        onChange={e => setLatex(e.target.value)}
        placeholder="输入LaTeX公式"
      />
      <MathJaxRenderer latex={latex} />
    </div>
  )
}

export default Test

3. Mermaid（非LaTeX可视化方案） #

如果无需LaTeX语法，Mermaid支持用简洁文本绘制数学公式、图表，兼容NextJS：

• 安装依赖：

npm install mermaid @mermaid-js/mermaid-react

• 示例代码：

import React, { useState } from 'react'
import { Mermaid } from '@mermaid-js/mermaid-react'

function Test() {
  const [mermaidCode, setMermaidCode] = useState(`
    math
      frac(1, sqrt(2)) cdot 2
  `)

  return (
    <div>
      <textarea
        value={mermaidCode}
        onChange={e => setMermaidCode(e.target.value)}
        placeholder="输入Mermaid数学语法"
      />
      <Mermaid chart={mermaidCode} />
    </div>
  )
}

export default Test

内容的提问来源于stack exchange，提问作者Benevos