Repo of the Day
saltyshiomix/nextron
Published: Oct 28, 2022
Open repository ↗Summary
Nextron combines Next.js and Electron so engineers can build cross-platform desktop applications using familiar React and Next.js tooling. The project ships a CLI (create-nextron-app) and a nextron command that wraps the Next.js dev/build flow with Electron launch and packaging. The current v10 line targets Next.js v16 and adds documented ESM support.
What it is useful for
- Scaffolding Electron + Next.js apps from a set of official examples: JavaScript, TypeScript, Tailwind CSS, Chakra UI, Material UI, Ant Design, Emotion,
next-i18next, persistent storage, and custom build options. - Running a unified development loop with a single
nextronscript that starts the Next.js renderer and the Electron shell together. The CLI exposes--renderer-port,--run-only,--startup-delay, and--electron-options. - Producing a packaged desktop binary through
nextron build, which delegates packaging toelectron-builderusing anelectron-builder.ymlfile in the project root. - Demonstrating desktop-platform integrations, such as a custom URL scheme for opening the app from a browser (the
basic-launch-app-from-urlexample, which is production-only). - Customizing the main-process bundle through
nextron.config.ts, which exposes a webpack hook and lets you overridemainSrcDirandrendererSrcDir.
How engineers can use it
- Scaffold a new app from an example. The README documents three equivalent forms, for example:
or withnpx create-nextron-app my-app --example with-tailwindcsspnpm dlx create-nextron-app my-app --example with-tailwindcss. - Run in development by setting
"dev": "nextron"inpackage.jsonand executingnpm run dev; this launches the Next.js dev server inside an Electron window. - Build a production bundle with
npm run build(which runsnextron build); output is written to thedistfolder perelectron-builder.yml. - Migrate existing projects from v9 to v10 by renaming
main/background.tstomain/main.tsand updating thepackage.json#mainfield toapp/main.js. For ESM, setpackage.json#typetomoduleand switchnext.config.jstoexport default.
Documented limitations to keep in mind: building a macOS binary requires a macOS host, the renderer uses output: 'export' (which forces images.unoptimized: true), and the URL-scheme example only works in a production build. For the full option list and migration notes, consult the README and the CHANGELOG.