nextronを使ってNext.jsでMacアプリを作る話 #JavaScript

この記事はNext.jsアドベントカレンダーの10日目の記事です。

どうも！ハムカツおじさんという名前でtwitterやってます(@hmktsu)🤘
自分でだったり弊社でだったりなどNext.jsを使ってサービスを作っています。

はじめに

現在作っているサービスの管理画面は自分たちでしか使わない + ffmpegで動画をエンコードしたりなど諸々作業をしないといけないという理由からElectronで作ろうと思いました。
もちろん普通にReactでというのも全然問題ないのですが、正直Next.jsに慣れているとReactのライブラリを色々と導入して…というのが面倒に感じてしまいます。

そこでElectronでどうにかNext.js使うことできないかな〜と思いつつ色々と探していたら、Next.jsを内包したnextronというパッケージがあったのでそちらを使うことにしました。
メンテナンスもしっかりと行われてたり、issueも活発に返答いただいたりと丁寧な感じなのでおすすめです。

saltyshiomix/nextron

ということでnextronを使うと便利だよ的な紹介をしたいと思います。

インストール

# npx create-nextron-app <MY-APP>

# templateを使う場合
$ npx create-nextron-app <MY-APP> --example with-typescript-material-ui

Nextと同じくこういうコマンドが用意されています。
examplesに色々とテンプレートが用意されているので使うと良いのではないかと。

.
├── README.md
├── electron-builder.yml
├── main
│   ├── background.js
│   └── helpers
│       ├── create-window.js
│       └── index.js
├── package.json
├── renderer
│   ├── next.config.js
│   ├── pages
│   │   ├── home.jsx
│   │   └── next.jsx
│   └── public
│       └── static
│           └── logo.png
└── resources
    ├── icon.icns
    └── icon.ico

これはテンプレートを使わないでインストールをしたものとなっています。
mainでElectronの初期化、rendererに通常のNext部分が入っています。

ビルド

{
  "scripts": {
    "build": "nextron build",
    "build:all": "nextron build --all",
    "build:win32": "nextron build --win --ia32",
    "build:win64": "nextron build --win --x64",
    "build:mac": "nextron build --mac --x64",
    "build:linux": "nextron build --linux"
  }
}

package.jsonのscriptsにすでにビルドコマンドを用意してくれています。
さらにelectron-builder.ymlを編集するなりすればもう少し細かいオプションの設定もすることができます。

$ nextron build --mac --x64 --config electron-builder.development.yml
$ nextron build --mac --x64 --config electron-builder.production.yml

またこのように--configオプションを指定することでymlの変更を行うこともできます。
こちらの機能を欲していたのでissueでお願いしたところすぐに作ってくれたので感謝です🙏

ビルドが完了するとdistフォルダ内に諸々出てくるのでそれを使うなりなんなりと。

注意点

サーバーレスモードとして扱われる
dev環境ではNextサーバが内部で動くが、ビルドしたものでは動かない
ファイルを置いてある環境(自分の場合はfirebase storage)によってはCORS制限にどうやっても引っかかるので、リバースプロキシをmain部分で定義して内部でサーバを立てる必要がある

その他もろもろありますが、Electronで出てくるようなものでもありますので割愛します。

まとめ

とりあえず単純な紹介記事になってしまって申し訳ないですが、Next.jsでMacアプリを作りたいというときはnextronを使うことをおすすめします。
通常のElectronは諸々設定なりも多いのでビルドすることも面倒だったりはしますが、ほぼほぼ何も気にする必要なく、しかも便利なscriptを内包してくれているのでビルドもすごく簡単にできます。
ぜひとも使ってみてください。