History

laiso 2c9c07f96d Update Electron, Typescript example (#15524 ) It seems like the error occurs with `next export` when building the current example. ``` $ cd examples/with-electron-typescript $ yarn && yarn build Error occurred prerendering page "/detail". Read more: https://err.sh/next.js/prerender-error Error: Error for page /detail: pages with `getServerSideProps` can not be exported. See more info here: https://err.sh/next.js/gssp-export Error: Export encountered errors on following paths: /detail at exportApp (/Users/kstg/src/github.com/zeit/next.js/examples/with-electron-typescript/node_modules/next/dist/export/index.js:22:1166) error Command failed with exit code 1. ``` I changed routes to statically resolve pages generating from `pages/detail.tsx` and added `getStaticPaths` and `getStaticProps`. so then it will export as follows ``` yarn run v1.22.4 $ next build renderer && next export renderer Creating an optimized production build... Compiled successfully. Automatically optimizing pages... Page Size First Load JS ┌ ○ / 336 B 62.6 kB ├ ○ /404 2.54 kB 61.6 kB ├ ○ /about 338 B 62.6 kB ├ ● /detail/[id] 440 B 62.7 kB ├ ├ /detail/101 ├ ├ /detail/102 ├ ├ /detail/103 ├ └ /detail/104 └ ● /initial-props 530 B 62.8 kB + First Load JS shared by all 59.1 kB ├ static/pages/_app.js 983 B ├ chunks/commons.9facbe.js 10.9 kB ├ chunks/framework.b76773.js 40.3 kB ├ runtime/main.800476.js 6.22 kB └ runtime/webpack.c21266.js 746 B λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps) ○ (Static) automatically rendered as static HTML (uses no initial props) ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps) > using build directory: /Users/kstg/src/github.com/zeit/next.js/examples/with-electron-typescript/renderer/.next copying "static build" directory > No "exportPathMap" found in "next.config.js". Generating map from "./pages" launching 7 workers Exporting (0/4) Exporting (1/4) Exporting (2/4) Exporting (3/4) Exporting (4/4) Export successful Done in 11.47s. ```		2020-07-28 23:00:56 +00:00
..
electron-src	Upgrade to Prettier 2 (#13061 )	2020-05-18 15:24:37 -04:00
renderer	Update Electron, Typescript example (#15524 )	2020-07-28 23:00:56 +00:00
.gitignore	Added .gitignore to examples that are deployed to vercel (#15127 )	2020-07-16 10:52:23 -04:00
package.json	Fix source in electron build (#9802 )	2019-12-21 13:25:27 -06:00
README.md	Suggest `npx` over `npm init` (#13637 )	2020-06-01 17:36:57 +00:00

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.

You can find a detailed documentation about how to build Electron apps with Next.js here!

How to use

Using `create-next-app`

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-electron-typescript with-electron-typescript-app
# or
yarn create next-app --example with-electron-typescript with-electron-typescript-app

Download manually

Download the example:

curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-electron-typescript
cd with-electron-typescript

To install and start dev build:

yarn install && yarn build && yarn start

Available commands:

"yarn build-renderer": build and transpile Next.js layer
"yarn build-electron": transpile electron layer
"yarn build": build both layers
"yarn start": start dev version
"yarn dist": create production elctron build
"yarn 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 file electron-next.d.ts in electron-src directory.