"Nextron": Electron + Next.js dream

saltyshiomix profile image Shiono Yoshihide ・2 min read

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.


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.


Nextron uses npx internally, so it requires below:

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


$ npm install --global nextron


# Install scaffolds for quick start
$ nextron init <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


yarn dev


yarn build



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

May the code be with you!

Posted on by:


markdown guide

Wow I never expected to find what I need so randomly, I'll test it on the week.


I'm very glad to hear that!
Could you let me know how it was, afterwards?
On my side, I'll test it by developing markdown editor, too :)


I'm testing on windows, at the moment Windows build don't finish. (My target with electron is Windows and I work on Windows) I'm gonna try on Linux. From Nextron can could it be possible to choose build OS? (I'm new to elctron)

For now, default yarn build command generates all platform builds.
Ok, I'll add build options for each platform today :)

Could you run node node_modules/nextron/build/javasript/start.js?

Above is internal yarn dev.

This may be webpacking main process error, so above command would tell us something.

Or, you use latest nextron(0.2.*)?
If so, i'm sorry for bugs i know that, and i'll fix them tonight(in Japan time).

nextron v0.1.* might work for you.
(npm install --global nextron@0.1.*)

yarn dev runs well, not the node command. No problem all code have bugs, I'll test with version 0.1.

Node Dev test

The same error with 0.1. Just to be sure if it was my OS I tested whit github.com/SimulatedGREG/electron-vue and does build and make de package for windows (the installer and .exe).

I'll test later on my PC (I'm at work right now)

I'm testing it on my Mac, then nextron@0.3.2(now latest) can build all packages.

Your error may be npx's bug, which is containing spaces in directory path.
So I decided to change code like below:

exec('npx webpack --config=***', { cwd })

exec('node_modules/.bin/webpack --config=***', { cwd })

So avoid npx bugs, Nextron has no requirements like npm >= 5.2 now!

I'm on my way to work, i'll test it, another option could be that Windows don't support build for OS X

nextron@0.3.4 is now released, which fixes yarn build error problem mainly on Windows!
(I tested Windows 7 (64bit) :)

It fail the first time, but on the second try it succeed.
(Windows 10 Home x64)

Yarn Succeed

Yarn Succeed


Thanks for the hard work, I'll keep testing it, hope to see great support for the project, already 1k download.


Fix almost all bugs, now released nextron@0.6.1 <3

Upgraded dependencies:

  • electron@^2.0.4
  • next@6.1.1

Peer dependencies:

  • react@^16
  • react-dom@^16

Here is sample:

$ nextron init test-app
$ cd test-app

# run development mode
$ yarn dev

# release build
$ yarn build

Glad to hear that,I'll be testing later in the day.

Implemented some examples like Material UI <3

You can try it by the command like below:

# Install latest nextron
$ npm i -g nextron@latest
$ nextron -v
nextron v0.7.5

# Init a nextron app with material-ui
$ nextron init test-app --template with-javascript-material-ui

# If you are typescript lover, you can also try typescript one :)
$ nextron init test-app --template with-typescript-material-ui

# Then, start the app
$ cd test-app
$ yarn (or `npm install`)
$ yarn dev (or `npm run dev`)

Hope you can see it:


how do I be able to access the pages with the application and production, developing access normally by port 8888, but in production how do I do?