335e91800b
They are added to `.gitignore` already. Follow-up on #39051 ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) Co-authored-by: JJ Kasper <jj@jjsweb.site> |
||
---|---|---|
.. | ||
electron-src | ||
renderer | ||
.gitignore | ||
package.json | ||
README.md |
Electron with Typescript application example
This example show how you can use Next.js inside an Electron application to avoid a lot of configuration, use Next.js router as view and use server-render to speed up the initial render of the application. Both Next.js and Electron layers are written in TypeScript and compiled to JavaScript during the build process.
Part | Source code (Typescript) | Builds (JavaScript) |
---|---|---|
Next.js | /renderer |
/renderer |
Electron | /electron-src |
/main |
Production | /dist |
For development it's going to run a HTTP server and let Next.js handle routing. In production it use next export
to pre-generate HTML static files and use them in your app instead of running an HTTP server.
How to use
Execute create-next-app
with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example with-electron-typescript with-electron-typescript-app
yarn create next-app --example with-electron-typescript with-electron-typescript-app
pnpm create next-app --example with-electron-typescript with-electron-typescript-app
Available commands:
"build-renderer": build and transpile Next.js layer
"build-electron": transpile electron layer
"build": build both layers
"dev": start dev version
"dist": create production electron build
"type-check": check TypeScript in project
Notes
You can create the production app using npm run dist
.
note regarding types:
- Electron provides its own type definitions, so you don't need @types/electron installed! source: https://www.npmjs.com/package/@types/electron
- There were no types available for
electron-next
at the time of creating this example, so until they are available there is a fileelectron-next.d.ts
inelectron-src
directory.