Nextron

Nextron is an open-source boilerplate that pairs Next.js with Electron so developers can build cross-platform desktop apps using React and web tooling, scaffolded through a create-nextron-app CLI.

What is Nextron?

Nextron is a scaffold and build tool that combines Next.js (v16.x for nextron v10) with Electron, generating a desktop app from a standard Next.js codebase. It takes a project directory that includes a renderer folder with Next.js pages and a main folder with Electron main process code, and it outputs packaged desktop applications via electron-builder under a dist folder. Maintained by Shiono Yoshihide (saltyshiomix) and community contributors, it is licensed under MIT.

Key Features

• create-nextron-app CLI — Bootstrap a new app in one command with npx, yarn, or pnpm, using any of the 13 built-in example templates.
• Unified dev workflow — Running nextron launches both the Next.js dev server (default port 8888) and an Electron window with hot reload of the renderer process and automatic main process rebuilds.
• Production build — nextron build triggers a Next.js static export into an app folder and hands off to electron-builder to produce binaries for Windows, macOS, and Linux; CLI flags like --mac, --linux, --win --ia32, and --win --x64 target specific platforms.
• Customizable build pipeline — The nextron.config.ts file lets you change the main and renderer source directories and override the main process webpack config; .babelrc can extend the main process Babel presets.
• ESM support — Nextron v10 supports package.json#type: "module", export default in next.config.js, and import.meta.dirname in place of __dirname.
• Example templates — Includes templates for Tailwind CSS, Material UI, Chakra UI, Ant Design, Emotion, next-i18next, custom renderer ports, custom build options, data storage, and launching the app from a URL via custom protocols.
• Electron-builder config — Ship with an electron-builder.yml that controls appId, productName, icons in resources, and publish targets, and it can be swapped for a custom config path with --config.

Who is it for?

This is for React developers who want to release desktop apps without learning Electron's full API surface. It serves Next.js developers who want to reuse their component code in a desktop shell, tutorial authors who want to demo web-driven desktop apps, and open-source developers who need a maintained scaffold with many UI-library examples to fork.

What can you do with Nextron?

• Web developers building native-desktop tools: Ship a Next.js-based utility (for example a markdown editor or dashboard) as a Windows, macOS, or Linux application by running nextron build --win or nextron build --mac on the appropriate host.
• Teams migrating a web app to desktop: Reuse an existing Next.js codebase in a new Electron shell — Nextron's static export and custom protocol support make it possible to open the app from a browser URL token, as shown in the basic-launch-app-from-url example.
• UI-library tinkerers: Start from a template that already has Ant Design, Chakra UI, Material UI, Tailwind CSS, or Emotion configured so UI experiments run in a desktop window from the first dev run.

How does Nextron work?

Install and scaffold with npx create-nextron-app MY_APP --example basic-lang-typescript. The generated project contains a main folder for Electron code, a renderer folder where Next.js pages live with next.config.ts set to output: 'export' and trailingSlash: true. Running npm run dev starts the Next.js server and an Electron window; npm run build produces installable bundles under dist using electron-builder.

FAQ

Is Nextron free?

Yes. The project is open source under the MIT license, so you can use it for commercial and personal apps without paying a license fee.

What versions of Next.js are supported?

Nextron v10 targets Next.js v16, v9 targets Next 14–16, v8 targets Next 12–13, and older releases map to earlier Next.js versions. Check the version table in the README to pick a matching Nextron release.

How do I create a Nextron app?

Run npx create-nextron-app MY_APP --example basic-lang-typescript (or with yarn/pnpm). The command clones the example structure into MY_APP, then you can run npm run dev to launch Electron.

Can I build for macOS from Windows?

No. The README states that building a macOS binary requires your host machine to be macOS, due to electron-builder constraints.

What is nextron.config.ts used for?

It customizes the build: it can set alternate mainSrcDir and rendererSrcDir paths and modify the main process webpack configuration via the webpack function.