MathJax and app router
Unanswered
Brown bear posted this in #help-forum
Brown bearOP
Hello! How can I add a
MathJaxContext to my layout? It's giving me an error when I try to add it to my layout.tsx:<body className="antialiased">
<MathJaxContext config={config}>
{children}
</MathJaxContext>
</body>10 Replies
@joulev https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-third-party-packages-and-providers
Brown bearOP
Are you suggesting I make my layout a client component? Why is that?
Brown bearOP
I'm not following. I don't see the parallel. Isn't this kind of what I already have with a MathJaxContext?
I think I need to look into providers :/
@Brown bear I'm not following. I don't see the parallel. Isn't this kind of what I already have with a MathJaxContext?
MathJaxContext can only be used inside a client component because it uses client-side hooks but doesn't have use client.so you need to make a new client component with
use client, use MathJaxContext inside that client component, and use said client component inside your server components.... just read the link, it explains this in more details than these two or three short paragraphs.
Brown bearOP
I think I did it correctly..?
'use client'
import React from "react";
import {MathJaxContext} from "better-react-mathjax";
export function Providers({ children }: Readonly<{
children: React.ReactNode;
}>) {
const config = {
loader: { load: ["[tex]/html"] },
tex: {
packages: { "[+]": ["html"] },
inlineMath: [
["$", "$"],
["\\(", "\\)"]
],
displayMath: [
["$$", "$$"],
["\\[", "\\]"]
]
}
};
return (
<MathJaxContext config={config}>
{children}
</MathJaxContext>
);
}so basically, if I'm to use client react components, I must wrap them into a provider or my own component with a
'use client' tag at the top?