← Back to archive

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 nextron script 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 to electron-builder using an electron-builder.yml file 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-url example, which is production-only).
  • Customizing the main-process bundle through nextron.config.ts, which exposes a webpack hook and lets you override mainSrcDir and rendererSrcDir.

How engineers can use it

  1. Scaffold a new app from an example. The README documents three equivalent forms, for example:
    npx create-nextron-app my-app --example with-tailwindcss
    
    or with pnpm dlx create-nextron-app my-app --example with-tailwindcss.
  2. Run in development by setting "dev": "nextron" in package.json and executing npm run dev; this launches the Next.js dev server inside an Electron window.
  3. Build a production bundle with npm run build (which runs nextron build); output is written to the dist folder per electron-builder.yml.
  4. Migrate existing projects from v9 to v10 by renaming main/background.ts to main/main.ts and updating the package.json#main field to app/main.js. For ESM, set package.json#type to module and switch next.config.js to export 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.