this app is built by following this link. it is also summarized in one boilerplate

git clone https://github.com/electron/electron-quick-start
yarn
yarn add --dev next@beta react react-dom
yarn add electron-next electron-is-dev

• electron-next: ensures that Electron can handle next.js' output in the renderer
• electon-is-dev: changes the main process' behavior depending on the environment the application is running in

Now let's check.

npm start

Use now-desktop as an example.

mkdir renderer && cd renderer
mkdir pages && cd pages

then create start.js as the entry point for next.js and create next.config.js inside renderer to let next.js know where to find start.js.

change main.js to get next.js called.

• import electron-next

const prepareNext = require('electron-next')

• replace the existing event listener

app.on('ready', createWindow)

with

app.on('ready', async () => {
  await prepareNext('./renderer')
  createWindow()
})

Then modify loadURL in main.js. Run it.

yarn add --dev electron-builder

modify pacakge.json

npm run dist

You will get the image built in dist directory.