next.jsのウィンドウが定義されていない

1. 問題の説明

SSRにnext+expressを使用、リッチテキストエディタ導入 braft-editor (なぜバックエンドのインターフェイスのレンダリングにSSRを使っているのかはわかりません。) コードは以下のとおりです。

import React from 'react'
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'

export default class EditorDemo extends React.

    state = {
        editorState: BraftEditor.createEditorState(null)
    async componentDidMount}

    async componentDidMount () {
    }

    submitContent = async () => {
    }

    handleEditorChange = (editorState) => {
        this.setState({ editorState })
    }

    render () {
        const { editorState } = this.state
        return (
            <div className="my-component">
                <BraftEditor
                    value={editorState}
                    onChange={this.handleEditorChange}
                    onSave={this.submitContent}
                />
            </div>
        )

    }

}

以下のエラーが発生しました。

(ReferenceError): window is not defined

これはわかりやすいですね、ssrを使ってページをレンダリングすると、reactのライフサイクルである render() render とその前のステージはコンポーネントを実際の dom ノードとしてレンダリングしないため、window オブジェクトを取得できません。

componentDidMount(){
    console.log( window ! == undefined ) //true
}

しかし、書き込みは禁止されています。

ES6仕様では、import/exportは現在の実行環境のトップレベルスコープでのみ宣言でき、importコマンドはモジュール全体の先頭に昇格されます

This is not allowed to be written ~
componentDidMount(){
    import BraftEditor from 'braft-editor'
}

2. 解決方法

next.jsのドキュメントには、モジュールを動的にインポートする方法が記載されています。 'next/dynamic' その

import dynamic from 'next/dynamic'

const DynamicPublish = dynamic(
  import('. /publish'),
  {
    ssr: false //this should be added to disable the use of SSR
  }
)

export default () => <DynamicPublish />

すると、大丈夫、リッチテキストエディタが正常に動作するようになりました。