Next.js(React)のみで開発できるElectronライブラリを作ってみた #JavaScript

作ったもの

Electron + Next.jsのアプリケーションをNext.jsの知識のみでなるべく作成できるようにするライブラリです。

$ npm install --global nextron

これでnextronコマンドとTypeScript用のnextron-tsコマンドが利用できるようになります。

試しにhogeという名前のアプリケーションを作るには、以下のようにします。

# hogeディレクトリ作成
$ nextron init hoge

# 開発モードでElectron + Next.jsアプリケーションを起動
$ cd hoge
$ yarn dev

これでElectron + Next.jsのアプリケーションがデバッグモードで立ち上がります。

実際のバイナリに配布するには、yarn buildコマンドを打って10分くらい待つとできあがります。

このコマンドライブラリは、Next.jsで作成されたSSRの静的サイト(index.html群)をrendererプロセスとして扱い、Electronのmainプロセスに食べさせているだけのライブラリです。

なぜこのライブラリを作ったかといいますと、Electron + Next.jsがお手軽に実現できるライブラリがまだこの世に現れていない(2018/5/6現在)か、私が知らなかったからです。

Next.jsの作者がサンプルを試していますが、これが普通にエラーになっていて使い物にならないんですね。

Next.jsはSSR(Server Side Rendering)をキャッチコピーにやってきたので、Electronと相性が悪いのはわかるのですが、それでもここまで相性が悪いのかと思うくらい自分でも作成してみてわかりました。

NextronはまだWIPプロジェクトですが、デバッグモード起動とリリースビルドがそれぞれ1コマンドで完結します。

我々開発者はなるべくコアな開発部分に集中できる状態でいたいはずなので、1コマンドに集約することは（バランスさえ保てれば）有用だと思います。

Nextronを皮切りにでもして、本家のzeitさんたちが公式のElectron + Next.jsライブラリを作成するまで、Nextronで自分は勉強していこうと思います。

誰かTypeScript + Reactが大好きな人いませんか〜？