codemirror-with-next.md

CodeMirror with Next

create & configure the app

Create the app:

create-next-app myapp

Install the CodeMirror dependencies:

npm install react-codemirror2 codemirror @zeit/next-css css-loader --save

add the component

components/code-with-codemirror.js

import React, { Component } from 'react'
import {UnControlled as CodeMirror} from 'react-codemirror2'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/material.css'

export default (props) => (
  <div>
    <CodeMirror
      {...props}
      value={props.value}
      options={{theme: 'material', mode: 'javascript'}}
      onChange={() => null}
    />
  </div>
)

Set up the CSS loader for webpack

next.config.js

const withCSS = require('@zeit/next-css')
module.exports = withCSS({
  webpack: (config) => {
    // Fixes npm packages that depend on `fs` module
    config.node = {
      fs: 'empty'
    }

    return config
  }
})

add the component to a page

To use this component, use a dynamic import with ssr set to false:

pages/codemirror.js

import dynamic from 'next/dynamic'
const CodeWithCodemirror = dynamic(import('../components/code-with-codemirror'), {ssr: false})

export default () => {
  return (
    <div>
      <CodeWithCodemirror value={"for (var i=0; i < 10; i++) {\n  console.log(i)\n}"} />
    </div>
  )
}