I'm a .NET developer in Japan usually, but I love to write JavaScript/TypeScript in my spare time.

This article introduces Nextron, which can make the Electron app with Next.js.

Why?

I totally respect zeit/next.js library, but with Electron, there is no de-facto-standard for now.

So I wrote Nextron in this spare time, Golden Week, in Japan.

Once you installed nextron, THEN

• you can write all renderer codes with Next.js
• you can build all cross-platform packages for release usage by only one command.

Requirements

Nextron uses npx internally, so it requires below:

• "node": ">=8.2.0"
• "npm": ">=5.2.0"

Install

$ npm install --global nextron

Usage

# Install scaffolds for quick start
$ nextron init <YOUR-APP-NAME>
$ cd <YOUR-APP-NAME>

# for development
# it starts development process (with HMR(Hot Module Replacement) featuire)
$ yarn dev

# for production
# it builds the electron app for release usage
$ yarn build

Folder Structure

After nextron init, folder structure below is created.

.
├── common
├── main
│   └── index.js
├── package.json
├── renderer
│   ├── next.config.js
│   └── pages
│       └── home.js
└── static
    ├── icon.icns
    └── icon.ico

At this time, we can:

1. develop whole renderer process with Next.js!
2. foget to know how we build electron packages for release

with Nextron

Screenshots

yarn dev

yarn build

Conclusion

At this time, this Nextron project is highly WIP, so PRs are welcome!!

May the code be with you!