Build an Electron App with Next.js

This has been moved to http://courses.eunjae.dev/electron-with-next-js. Please purchase this there.

You can write index.html and wrap it with Electron. However, as your app grows, it becomes hard to maintain and scale it, just like building websites. You need a good framework like Next.js, which provides code-splitting, route pre-fetch, fast refresh on dev mode, etc.

Develop an app as if you develop a website and turn it into an Electron app. This is not a step-by-step tutorial. I will go through the source code of the app I built, GomScope, and just like handing over a project to a colleague, I explain bit by bit.

This is for you if you

• are familiar with React
• have a little experience with Next.js
• want to build an electron app with Next.js
  
• want to have a better dev environment including fast refresh on file change

You will learn:

• Validating license with Gumroad license API
• Folder structure and scripts
• Entry file for Electron
• Keeping the window size & position
• Build script (Next.js + Electron)
• Abstracting API layer
     - Using HTTP in the browser (dev)   - Using IPC in the electron (production)

• SWR (API retry on error, refreshing on re-focus, etc.)
• Validating license key in-depth
• Config store (unified interface for both in browser and electron)
• Global business logic in _app.js
• Webpack configuration
• Bundling (w/ rollup) the entry file for Electron
• Build script
• Release script
• Notarize the app
• Auto-updater
• Store migration
• Patching npm packages with patch-package