Equation in Next.js

That’s so hard but easy. Actually there are not very good solutions in Internet. I install a lot of packages but finally fail. It because all these solutions want to render all page with markdown but not only the equation.

Finally, ChatGPT help to solve the problem. Oh, that’s a shame and surprise.

Very simple.

1. install katex and react-katex, and very important, install @types/react-katex or the Next.js cannot import the module. (This is vs code told me, not the chatGPT.

   npm install katex react-katex
   npm i --save-dev @types/react-katex

2. Just imported the module in your page.tsx, for example

   import 'katex/dist/katex.min.css';
   import { BlockMath, InlineMath } from 'react-katex';
   
   export default function Home() {
     return (
       <div>
           <InlineMath math="a^2 + b^2 = c^2"></InlineMath>
   	      <BlockMath math="\int_0^\infty x^2 dx"></BlockMath>
       </div>
     );
   }