How to apply it in NextJS

[bigomise]

Hi,

I'm interested in Langium but i'm struggling in implementing with NextJS app. Not sure how to use the wrapper and also worker in NextJS.

If anyone could share an example would be appreciated 🙏.

Thanks in advance!

[msujew]

Hey @bigomise,

I assume you're using React with NextJS? The monaco wrapper only requires an HTML element to mount into. You should be able to use a useRef with a useEffect and mount the editor into the underlying HTML element. You can also use the @typefox/monaco-editor-react component, which is a ready to use React component for the wrapper.

As for the worker, you should be able to just move/compile the language server into your public folder and reference the webworker as a path. In theory you should also be able to just use the path to the TypeScript file that is the entry point to your language server. See an example here (compiled with vite). And another one with NextJS (but without Langium).

[bigomise]

wow, thanks a lot.. let me take a look at it. @msujew 🙏