4466ba436b
## Description This PR ensures that the default prettier config is used for examples and templates. This config is compatible with `prettier@3` as well (upgrading prettier is bigger change that can be a future PR). ## Changes - Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will be needed upgrading to prettier@3) - Added `examples/.prettierrc.json` with default config (this will change every example) - Added `packages/create-next-app/templates/.prettierrc.json` with default config (this will change every template) ## Related - Fixes #54402 - Closes #54409 |
||
---|---|---|
.. | ||
electron-src | ||
renderer | ||
.gitignore | ||
next.config.js | ||
package.json | ||
README.md |
Electron with Typescript application example
This example shows how to use Next.js inside an Electron application. To avoid a lot of configuration, we use Next.js as a router for pages, and use server rendering 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 will use output: 'export'
to pre-generate HTML static files and use them in your app (instead of running a 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.