node.js – How can I integrate Mathjax on my Next.js app to render inline and display equations using Latex?

I want to integrate Mathjax on my nextjs app.
I am using nextjs 13 and use app dir for routing
I want to my code rendered in server, so that is no need to rerender when user open the page.
I try to read documentation but still lack info.

Iwant to get Some inline equation $x^2-2x+5=0$ will render inline. and Some display equation using duble dollar $$x^2-2x+5=0$$ will render display.

That is my code

import { mathjax } from 'mathjax-full/js/mathjax.js';
import { TeX } from 'mathjax-full/js/input/tex.js';
import { SVG } from 'mathjax-full/js/output/svg.js';
import { liteAdaptor } from 'mathjax-full/js/adaptors/liteAdaptor.js';
import { RegisterHTMLHandler } from 'mathjax-full/js/handlers/html.js';

const inputTex = 'Persamaan $c = \\pm\\sqrt{a^2 + b^2}$';

const adaptor = liteAdaptor();
RegisterHTMLHandler(adaptor);

const tex = new TeX();
const svg = new SVG();
const html = mathjax.document('', { InputJax: tex, OutputJax: svg });

// Mode inline
const nodeInline = html.convert(inputTex, { display: false });
const svgCodeInline = adaptor.outerHTML(nodeInline);


// Mode display
const nodeDisplay = html.convert(inputTex, { display: true });
const svgCodeDisplay = adaptor.outerHTML(nodeDisplay);


export default function page() {
    return (
    <>
        <span dangerouslySetInnerHTML={{ __html: svgCodeInline }}></span>
        <span dangerouslySetInnerHTML={{ __html: svgCodeDisplay }}></span>
    </>
    )
}

But that will convert all text, not only formula between $. This is sample outpun
Render all text
Anyone can help me?