Nextron: Next.js and Electron Desktop Framework

What is Nextron?

Nextron is an open-source framework, maintained at saltyshiomix/nextron, that scaffolds an Electron app around a Next.js renderer so the interface runs on ordinary web code. A project splits into a main-process folder and a renderer folder, where Next.js builds as a static export before Electron loads it, and electron-builder handles the macOS, Windows, and Linux packaging step.

Key Features and Integrations

• ✓A direct Next.js-to-Nextron version table in the README: Next.js v16.x pairs with Nextron v10.x, v14.x-v16.x with v9.x, v12.x-v13.x with v8.x, down through v6.x pairing with Nextron v1.x.
• ✓ESM support added in v10: set package.json's type field to module, switch next.config.js to export default, and replace __dirname with import.meta.dirname across the codebase.
• ✓Project scaffolding through create-nextron-app, with example templates covering with-tailwindcss, with-material-ui, with-chakra-ui, with-ant-design, with-emotion, and with-next-i18next.
• ✓A custom webpack config for the main process via nextron.config.ts, including overrides for mainSrcDir and rendererSrcDir.
• ✓Development CLI flags: --renderer-port to change the Next.js dev server port (default 8888), --run-only to suppress main-process hot reload, --startup-delay to wait for the renderer, and --electron-options to pass raw Electron flags like --no-sandbox.
• ✓Per-platform build flags for packaging: --mac, --mac --universal, --linux, --win --ia32, --win --x64, plus --no-pack to skip electron-builder packaging.
• ✓A custom Babel config for the main process through a .babelrc with the nextron/babel preset.

Getting Started with Nextron

There's no separate install step. create-nextron-app scaffolds the whole project in one command: `npx create-nextron-app my-app --example with-tailwindcss`, or the yarn/pnpm equivalents (`yarn create nextron-app my-app --example with-tailwindcss`, `pnpm dlx create-nextron-app my-app --example with-tailwindcss`). Swap the --example value for any bundled template, including basic-lang-javascript, basic-lang-typescript, and with-chakra-ui. The README doesn't state a minimum Node.js version, so check that separately against whichever Next.js version you're pairing it with.

Development and Production Builds

Development mode is one script: set package.json's dev entry to `nextron`, and `npm run dev` launches the Electron window with the Next.js dev server already wired up for hot reload. Production works the same way - set the build entry to `nextron build`, and `npm run build` outputs packaged bundles into the dist folder. Under the hood, Nextron's own next.config.ts forces `output: 'export'` since Electron needs static files, switches distDir to ../app in production, sets trailingSlash so home.tsx becomes home/index.html, and turns off Next's image optimization because it doesn't work with a static export. Platform builds go through flags: `nextron build --mac`, `--mac --universal`, `--linux`, `--win --ia32`, `--win --x64`, and a macOS binary has to be built on macOS itself. Packaging is handled by electron-builder.yml, which sets appId, productName, the output directory, and which files ship; point to a different config with --config, or skip packaging entirely with --no-pack.

Example Nextron Applications

• •Building a Tailwind-styled desktop app off the with-tailwindcss example instead of wiring Tailwind into Electron by hand.
• •Shipping an app that launches from a custom URL protocol, using the basic-launch-app-from-url example - the README notes this one only works in a production build.
• •Starting a desktop app that needs to persist local data, using basic-store-data as the base instead of building storage from zero.
• •Dropping in Ant Design, Chakra UI, Material UI, or Emotion straight from the matching example folder rather than configuring each UI kit manually.
• •Localizing a desktop app's interface with the with-next-i18next example when the product needs more than one language.

Alternatives for Desktop Development

Frequently Asked Questions

The problem it solves

Wiring a modern frontend framework into Electron usually means writing a separate main-process entry point, configuring a bundler for it by hand, and figuring out how to load a dev server's output into a BrowserWindow versus a static build for production. Next.js adds its own wrinkle: the renderer has to run as a static export, with image optimization and server rendering turned off, before Electron can load it at all. Nextron's README frames its own reason for existing around that setup cost, describing its goal as giving developers a path to build desktop software using nothing beyond typical web skills, staying easy to pick up, and staying open to outside contributors, then folding the Next.js-to-Electron wiring into a CLI and project templates instead of a from-scratch integration every time.

Who should try it — and who should skip

Try Nextron if your team already builds in Next.js and React and wants a desktop build without adopting a second frontend framework or hand-writing Electron's main-process boilerplate. Skip it if you need a smaller install size than Electron produces - Nextron doesn't change Electron's runtime footprint - or if your app depends on server-side rendering and API routes at runtime, since the static-export requirement rules that out.

Related repositories