Build an Electron App with Next.js

[NOTICE] It has been a long time since I created this course, and there have been many changes in Next.js. If you simply want to understand the general approach I used, then this information is still relevant. However, the attached source code may not function correctly in the current environment.

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