{"id":13406239,"url":"https://github.com/saltyshiomix/nextron","last_synced_at":"2025-05-10T04:36:54.267Z","repository":{"id":37413012,"uuid":"131385080","full_name":"saltyshiomix/nextron","owner":"saltyshiomix","description":"⚡ Next.js + Electron ⚡","archived":false,"fork":false,"pushed_at":"2025-01-16T10:59:00.000Z","size":28446,"stargazers_count":4210,"open_issues_count":123,"forks_count":241,"subscribers_count":41,"default_branch":"main","last_synced_at":"2025-05-08T20:57:30.987Z","etag":null,"topics":["electron","nextjs","nextron","react","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://npm.im/nextron","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/saltyshiomix.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["saltyshiomix"]}},"created_at":"2018-04-28T07:29:23.000Z","updated_at":"2025-05-08T19:17:05.000Z","dependencies_parsed_at":"2023-12-07T02:29:53.786Z","dependency_job_id":"b83284e8-a449-4c2f-bd10-dca444bd6df6","html_url":"https://github.com/saltyshiomix/nextron","commit_stats":{"total_commits":1650,"total_committers":38,"mean_commits":"43.421052631578945","dds":0.05939393939393944,"last_synced_commit":"5ba80ba05c0955a24d0f75a5b27dd839b8ec13c8"},"previous_names":[],"tags_count":328,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saltyshiomix%2Fnextron","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saltyshiomix%2Fnextron/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saltyshiomix%2Fnextron/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saltyshiomix%2Fnextron/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saltyshiomix","download_url":"https://codeload.github.com/saltyshiomix/nextron/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253149568,"owners_count":21861719,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["electron","nextjs","nextron","react","reactjs","typescript"],"created_at":"2024-07-30T19:02:24.958Z","updated_at":"2025-05-08T22:30:16.326Z","avatar_url":"https://github.com/saltyshiomix.png","language":"TypeScript","funding_links":["https://github.com/sponsors/saltyshiomix"],"categories":["Boilerplates","TypeScript","Uncategorized","Free Boilerplates"],"sub_categories":["Uncategorized"],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"https://i.imgur.com/0vkxIMN.png\"\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca aria-label=\"NPM version\" href=\"https://www.npmjs.com/package/nextron\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/nextron.svg?style=for-the-badge\u0026labelColor=000000\" alt=\"NPM version\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"NPM downloads\" href=\"https://www.npmjs.com/package/nextron\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dt/nextron.svg?style=for-the-badge\u0026labelColor=000000\" alt=\"NPM downloads\"\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/github/license/saltyshiomix/nextron.svg?style=for-the-badge\u0026labelColor=000000\" alt=\"Package License (MIT)\"\u003e\n  \u003ca aria-label=\"AWESOME NEXTJS\" href=\"https://github.com/unicodeveloper/awesome-nextjs\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/AWESOME%20%20NEXTJS-b37fb3.svg?style=for-the-badge\" alt=\"AWESOME NEXTJS\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch2 align=\"center\"\u003e\n  \u003ca aria-label=\"2024 Roadmaps - I'm back!\" href=\"https://github.com/saltyshiomix/nextron/issues/442\"\u003e\n    2024 Roadmaps - I'm back!\n  \u003c/a\u003e\n\u003c/h2\u003e\n\n## Support\n\n### Next.js vs Nextron\n\n| next              | nextron         |\n| ----------------- | --------------- |\n| `v14.x`           | `v9.x`          |\n| `v12.x` / `v13.x` | `v8.x`          |\n| `v11.x`           | `v7.x`          |\n| `v10.x`           | `v6.x`          |\n| `v9.x`            | `v5.x`          |\n| `v8.x`            | `v4.x`          |\n| `v7.x`            | `v2.x` / `v3.x` |\n| `v6.x`            | `v1.x`          |\n\n### Package Manager\n\n`npm`, `yarn` and `pnpm` are supported.\n\n## My Belief for Nextron\n\n1. Show a way of developing desktop apps with only web knowledge\n1. Easy to use\n1. Be transparent and open to OSS developers\n\n## Usage\n\n### Create Application with Template\n\nWe can use `examples/*` as a template.\n\nTo create the `examples/with-tailwindcss`, run the command below:\n\n```\n# with npx\n$ npx create-nextron-app MY_APP --example with-tailwindcss\n\n# with yarn\n$ yarn create nextron-app MY_APP --example with-tailwindcss\n\n# with pnpm\n$ pnpm dlx create-nextron-app MY_APP --example with-tailwindcss\n```\n\n### Run Electron with Development Mode\n\nRun `npm run dev`, and nextron automatically launches an electron app.\n\n```json\n{\n  \"scripts\": {\n    \"dev\": \"nextron\"\n  }\n}\n```\n\n### Production Build\n\nRun `npm run build`, and nextron outputs packaged bundles under the `dist` folder.\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"nextron build\"\n  }\n}\n```\n\n## Basic Directory Structures\n\n```\n.\n├── main\n│   ├── background.ts\n│   └── preload.ts\n├── renderer\n│   ├── next.config.js\n│   ├── pages\n│   │   ├── home.tsx\n│   │   └── next.tsx\n│   ├── preload.d.ts\n│   ├── public\n│   │   └── images\n│   │       └── logo.png\n│   └── tsconfig.json\n├── resources\n│   ├── icon.icns\n│   └── icon.ico\n├── nextron.config.js\n├── electron-builder.yml\n├── package.json\n├── tsconfig.json\n└── README.md\n```\n\n## `next.config.js`\n\n```js\n// in `./renderer/next.config.js`\nmodule.exports = {\n  // we need to export static files so as Electron can handle them\n  output: 'export',\n\n  distDir:\n    process.env.NODE_ENV === 'production'\n      ? // we want to change `distDir` to \"../app\" so as nextron can build the app in production mode!\n        '../app'\n      : // default `distDir` value\n        '.next',\n\n  // e.g. home.html =\u003e home/index.html\n  trailingSlash: true,\n\n  // we need to disable image optimization, because it is not compatible with `{ output: 'export' }`\n  images: {\n    unoptimized: true,\n  },\n\n  // webpack config for next.js\n  webpack: (config) =\u003e {\n    return config\n  },\n}\n```\n\n## `nextron` or `nextron dev` Options\n\n### `--renderer-port` (default: `8888`)\n\nIt specifies `next` dev server port:\n\n```json\n{\n  \"scripts\": {\n    \"dev\": \"nextron --renderer-port 7777\"\n  }\n}\n```\n\n### `--run-only` (default: `undefined`)\n\nIt suppresses hot reloading of the main process:\n\n```json\n{\n  \"scripts\": {\n    \"dev\": \"nextron --run-only\"\n  }\n}\n```\n\n### `--startup-delay` (default: `0`)\n\nIt waits until renderer process is ready (milliseconds):\n\n```json\n{\n  \"scripts\": {\n    \"dev\": \"nextron --startup-delay 3000\"\n  }\n}\n```\n\n### `--electron-options` (default: `undefined`)\n\nWe can pass electron args via `--electron-options`:\n\n```json\n{\n  \"scripts\": {\n    \"dev\": \"nextron --electron-options=\\\"--no-sandbox\\\"\"\n  }\n}\n```\n\n## `nextron build` Options\n\n**NOTE**:\n\n- To build macOS binary, your host machine must be macOS!\n- Please consider to use `electron-builder.yml` instead of these CLI options.\n  - [Command Line Interface (CLI) - electron-builder](https://www.electron.build/cli)\n  - [Common Configuration - electron-builder](https://www.electron.build/configuration/configuration)\n\nTo build Windows 32 bit version, run `npm run build:win32` like below:\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"nextron build\",\n    \"build:mac\": \"nextron build --mac\",\n    \"build:mac:universal\": \"nextron build --mac --universal\",\n    \"build:linux\": \"nextron build --linux\",\n    \"build:win32\": \"nextron build --win --ia32\",\n    \"build:win64\": \"nextron build --win --x64\"\n  }\n}\n```\n\n### `--config` (default: `./electron-builder.yml`)\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"nextron build --config ./configs/electron-builder.prod.yml\"\n  }\n}\n```\n\n### `--publish` (default: `undefined`)\n\n**Note**\n\nHighly recommend to use `electron-builder.yml`:\n\nhttps://www.electron.build/configuration/publish\n\n### `--no-pack` (default: `undefined`)\n\nThis option skips packaging by electron-builder:\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"nextron build --no-pack\"\n  }\n}\n```\n\n### Build Configuration: `electron-builder.yml`\n\nEdit `electron-builder.yml` for custom build configurations:\n\n```yml\nappId: com.example.nextron\nproductName: My Nextron App\ncopyright: Copyright © 2020 Yoshihide Shiono\ndirectories:\n  output: dist\n  buildResources: resources\nfiles:\n  - from: .\n    filter:\n      - package.json\n      - app\npublish: null # see https://www.electron.build/configuration/publish\n```\n\nFor more information, please check out [electron-builder official configuration documents](https://www.electron.build/configuration/configuration).\n\n## Custom Config: `nextron.config.js`\n\n```js\nmodule.exports = {\n  // specify an alternate main src directory, defaults to 'main'\n  mainSrcDir: 'main',\n  // specify an alternate renderer src directory, defaults to 'renderer'\n  rendererSrcDir: 'renderer',\n\n  // main process' webpack config\n  webpack: (config, env) =\u003e {\n    // do some stuff here\n    return config\n  },\n}\n```\n\n## Custom Babel Config for Main Process\n\nWe can extends the default babel config of main process by putting `.babelrc` in our project root like this:\n\n**`.babelrc`**:\n\n```json\n{\n  \"presets\": [\"nextron/babel\"]\n}\n```\n\n## Examples\n\n### [examples/basic-lang-javascript](./examples/basic-lang-javascript)\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://i.imgur.com/X7dSE68.png\"\u003e\u003c/p\u003e\n\n```\n# with npx\n$ npx create-nextron-app my-app --example basic-lang-javascript\n\n# with yarn\n$ yarn create nextron-app my-app --example basic-lang-javascript\n\n# with pnpm\n$ pnpm dlx create-nextron-app my-app --example basic-lang-javascript\n```\n\n### [examples/basic-lang-javascript-python](./examples/basic-lang-javascript-python)\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://i.imgur.com/RzAykrU.png\"\u003e\u003c/p\u003e\n\n```\n# with npx\n$ npx create-nextron-app my-app --example basic-lang-javascript-python\n\n# with yarn\n$ yarn create nextron-app my-app --example basic-lang-javascript-python\n\n# with pnpm\n$ pnpm dlx create-nextron-app my-app --example basic-lang-javascript-python\n```\n\n### [examples/basic-lang-typescript](./examples/basic-lang-typescript)\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://i.imgur.com/NZfsD1p.png\"\u003e\u003c/p\u003e\n\n```\n# with npx\n$ npx create-nextron-app my-app --example basic-lang-typescript\n\n# with yarn\n$ yarn create nextron-app my-app --example basic-lang-typescript\n\n# with pnpm\n$ pnpm dlx create-nextron-app my-app --example basic-lang-typescript\n```\n\n### [examples/basic-launch-app-from-url](./examples/basic-launch-app-from-url)\n\nThis example shows how to open your app from browser URL.\n\nNote: this example works **only production build**!\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"./docs/examples/basic-launch-app-from-url/nextron.gif\"\u003e\u003c/p\u003e\n\n```\n# with npx\n$ npx create-nextron-app my-app --example basic-launch-app-from-url\n\n# with yarn\n$ yarn create nextron-app my-app --example basic-launch-app-from-url\n\n# with pnpm\n$ pnpm dlx create-nextron-app my-app --example basic-launch-app-from-url\n\n# --------------------------------------------------------------\n\n# Production build\n$ yarn build (or `npm run build` or `pnpm run build`)\n```\n\nAfter production build, open `your-custom-protocol://open?token=jwt-value` in your browser, then the app will be shown like a magic!\n\nIf you want to change schema URL, please edit `electron-builder.yml#protocols`:\n\n```yml\nprotocols:\n  name: Your App Name\n  schemes: [your-custom-protocol-edited]\n```\n\nThen, you can see the app from URL: `your-custom-protocol-edited://any-uri-here?data=include-any-data`.\n\n### [examples/basic-store-data](./examples/basic-store-data)\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://i.imgur.com/BgFze6G.png\"\u003e\u003c/p\u003e\n\n```\n# with npx\n$ npx create-nextron-app my-app --example basic-store-data\n\n# with yarn\n$ yarn create nextron-app my-app --example basic-store-data\n\n# with pnpm\n$ pnpm dlx create-nextron-app my-app --example basic-store-data\n```\n\n### [examples/custom-build-options](./examples/custom-build-options)\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://i.imgur.com/QqQekRJ.png\"\u003e\u003c/p\u003e\n\n```\n# with npx\n$ npx create-nextron-app my-app --example custom-build-options\n\n# with yarn\n$ yarn create nextron-app my-app --example custom-build-options\n\n# with pnpm\n$ pnpm dlx create-nextron-app my-app --example custom-build-options\n```\n\n### [examples/custom-renderer-port](./examples/custom-renderer-port)\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://i.imgur.com/X7dSE68.png\"\u003e\u003c/p\u003e\n\n```\n# with npx\n$ npx create-nextron-app my-app --example custom-renderer-port\n\n# with yarn\n$ yarn create nextron-app my-app --example custom-renderer-port\n\n# with pnpm\n$ pnpm dlx create-nextron-app my-app --example custom-renderer-port\n```\n\n### [examples/with-ant-design](./examples/with-ant-design)\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://i.imgur.com/NrkTPe9.png\"\u003e\u003c/p\u003e\n\n```\n# with npx\n$ npx create-nextron-app my-app --example with-ant-design\n\n# with yarn\n$ yarn create nextron-app my-app --example with-ant-design\n\n# with pnpm\n$ pnpm dlx create-nextron-app my-app --example with-ant-design\n```\n\n### [examples/with-chakra-ui](./examples/with-chakra-ui)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://i.imgur.com/oahHuxG.png\"\u003e\n  \u003cimg src=\"https://i.imgur.com/sZ01Nyl.png\"\u003e\n\u003c/p\u003e\n\n```\n# with npx\n$ npx create-nextron-app my-app --example with-chakra-ui\n\n# with yarn\n$ yarn create nextron-app my-app --example with-chakra-ui\n\n# with pnpm\n$ pnpm dlx create-nextron-app my-app --example with-chakra-ui\n```\n\n### [examples/with-emotion](./examples/with-emotion)\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://i.imgur.com/3UKgyH7.png\"\u003e\u003c/p\u003e\n\n```\n# with npx\n$ npx create-nextron-app my-app --example with-emotion\n\n# with yarn\n$ yarn create nextron-app my-app --example with-emotion\n\n# with pnpm\n$ pnpm dlx create-nextron-app my-app --example with-emotion\n```\n\n### [examples/with-material-ui](./examples/with-material-ui)\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://i.imgur.com/flcMvDC.png\"\u003e\u003c/p\u003e\n\n```\n# with npx\n$ npx create-nextron-app my-app --example with-material-ui\n\n# with yarn\n$ yarn create nextron-app my-app --example with-material-ui\n\n# with pnpm\n$ pnpm dlx create-nextron-app my-app --example with-material-ui\n```\n\n### [examples/with-next-i18next](./examples/with-next-i18next)\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://i.imgur.com/uhXCr6v.png\"\u003e\u003c/p\u003e\n\n```\n# with npx\n$ npx create-nextron-app my-app --example with-next-i18next\n\n# with yarn\n$ yarn create nextron-app my-app --example with-next-i18next\n\n# with pnpm\n$ pnpm dlx create-nextron-app my-app --example with-next-i18next\n```\n\n### [examples/with-tailwindcss](./examples/with-tailwindcss)\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://i.imgur.com/a9QWW0v.png\"\u003e\u003c/p\u003e\n\n```\n# with npx\n$ npx create-nextron-app my-app --example with-tailwindcss\n\n# with yarn\n$ yarn create nextron-app my-app --example with-tailwindcss\n\n# with pnpm\n$ pnpm dlx create-nextron-app my-app --example with-tailwindcss\n```\n\n## Develop\n\n### Basic\n\n```\n$ git clone https://github.com/saltyshiomix/nextron.git\n$ cd nextron\n$ pnpm install\n$ pnpm dev # default is examples/basic-lang-javascript\n```\n\n### Developing `examples/*`\n\n```\n$ pnpm dev \u003cEXAMPLE-FOLDER-NAME\u003e\n```\n\n### Developing for your own project\n\n1. Install development version of nextron\n\n```\n$ cd nextron\n$ npm install\n$ npm run build\n$ npm link\n```\n\n2. Install linked nextron in your project\n\n```\n$ cd your-project\n$ npm link nextron\n```\n\n3. On every change in nextron, run `npm run build` in nextron folder and restart your project\n\n## Maintainers ⚡\n\n- [saltyshiomix (Shiono Yoshihide)](https://github.com/saltyshiomix)\n- [lacymorrow (Lacy Morrow)](https://github.com/lacymorrow)\n- [Psycokwet](https://github.com/Psycokwet)\n- [m5x5](https://github.com/m5x5)\n- [andirsun (Anderson Laverde)](https://github.com/andirsun)\n- [bm777 (Bayang)](https://github.com/bm777)\n- [FranciscoJBrito (Francisco Brito)](https://github.com/FranciscoJBrito)\n- [pixelass (Gregor Adams)](https://github.com/pixelass)\n\nFor more information, please see [Looking for maintainers ⚡ #244](https://github.com/saltyshiomix/nextron/discussions/244).\n\n## Community\n\nYou already create apps with nextron? Feel free to share your apps or services: [Made by nextron? #406](https://github.com/saltyshiomix/nextron/discussions/406)\n\n## Related\n\n- [create-nextron-app](https://github.com/saltyshiomix/create-nextron-app) - Create Nextron (Next.js + Electron) apps in one command ⚡\n\n## License\n\nThis project is licensed under the terms of the [MIT license](https://github.com/saltyshiomix/nextron/blob/main/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaltyshiomix%2Fnextron","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaltyshiomix%2Fnextron","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaltyshiomix%2Fnextron/lists"}