Nextjs install Monaco Editor

Commands to run in Nextjs

  • npm i react-monaco-editor
  • npm i monaco-editor monaco-editor-core monaco-languageclient
  • npm i monaco-editor-webpack-plugin

and finally create a component Editor.js with this code:

'use client' // This is a client component 👈🏽
import MonacoEditor from 'react-monaco-editor'

export default function Editor() {
  return <MonacoEditor height="500" />
}

customize following https://github.com/react-monaco-editor/react-monaco-editor