How To Add Monaco Editor to a Next.js app

// next.config.jsconst MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");const withTM = require("next-transpile-modules")([  // `monaco-editor` isn't published to npm correctly: it includes both CSS  // imports and non-Node friendly syntax, so it needs to be compiled.  "monaco-editor"]);module.exports = withTM({  webpack: config => {    const rule = config.module.rules      .find(rule => rule.oneOf)      .oneOf.find(        r =>          // Find the global CSS loader          r.issuer && r.issuer.include && r.issuer.include.includes("_app")      );    if (rule) {      rule.issuer.include = [        rule.issuer.include,        // Allow `monaco-editor` to import global CSS:        /[\\/]node_modules[\\/]monaco-editor[\\/]/      ];    }    config.plugins.push(      new MonacoWebpackPlugin({        languages: [          "json",          "markdown",          "css",          "typescript",          "javascript",          "html",          "graphql",          "python",          "scss",          "yaml"        ],        filename: "static/[name].worker.js"      })    );    return config;  }});

import React from "react";// etcimport dynamic from "next/dynamic";const MonacoEditor = dynamic(import("react-monaco-editor"), { ssr: false });function App() {  const [postBody, setPostBody] = React.useState("");  // etc  return (<div>  {/* etc */}    <MonacoEditor      editorDidMount={() => {        // @ts-ignore        window.MonacoEnvironment.getWorkerUrl = (          _moduleId: string,          label: string        ) => {          if (label === "json")            return "_next/static/json.worker.js";          if (label === "css")            return "_next/static/css.worker.js";          if (label === "html")            return "_next/static/html.worker.js";          if (            label === "typescript" ||            label === "javascript"          )            return "_next/static/ts.worker.js";          return "_next/static/editor.worker.js";        };      }}      width="800"      height="600"      language="markdown"      theme="vs-dark"      value={postBody}      options={{        minimap: {          enabled: false        }      }}      onChange={setPostBody}    />  </div>)}