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

作ったもの

Nextron - ⚡ Electron + Next.js ⚡

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分くらい待つとできあがります。

なぜNextronが必要なのか

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

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

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

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

1コマンドで実現できる世界を増やす

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

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

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

関連記事

"Nextron": Electron + Next.js dream

Building Electron Apps with Next.js

P.S.

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