Registry / web-framework / electron-next

electron-next

JSON →
library3.1.5jsnpmunverified

electron-next is a utility package designed to seamlessly integrate Next.js into Electron applications, primarily for powering the renderer process. It handles both development and production workflows, ensuring that Next.js bundles are correctly served within Electron's file:// protocol environment in production, and managing the development server in development. The current stable version is 3.1.5. Based on recent activity, the package has a moderate release cadence, focusing on patches, dependency upgrades, and minor features rather than major breaking changes. Its key differentiator is simplifying the often-complex setup of using a modern web framework like Next.js within a desktop application shell, abstracting away much of the configuration required for renderer process bundling and serving.

web-framework
npm install electron-next
github ↗package ↗
INSTALL
IMPORT
SIG · ELECTRON-NEXT
E
electron-next
web-frameworkjavascriptv3.1.5
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

prepareRenderer
✓ const prepareRenderer = require('electron-next')
✗ import prepareRenderer from 'electron-next'
The package primarily uses CommonJS exports; direct ESM import syntax without a build step may not work as expected in all environments.
prepareRenderer (named)
✓ const prepareRenderer = require('electron-next')
✗ import { prepareRenderer } from 'electron-next'
The main export is a function assigned directly to `module.exports`, not a named export from a module. Use the CommonJS default import pattern.

This code demonstrates the basic setup for an Electron application using electron-next. It initializes the Next.js renderer, creates an Electron window, and correctly loads the Next.js application based on the `NODE_ENV` (development server or production build).

const prepareRenderer = require('electron-next'); const { app, BrowserWindow } = require('electron'); const path = require('path'); const PORT = process.env.ELECTRON_NEXT_PORT ? parseInt(process.env.ELECTRON_NEXT_PORT, 10) : 8000; const RENDERER_PATH = path.join(__dirname, 'renderer'); // Adjust if your Next.js app is elsewhere async function createWindow () { // Prepare the Next.js renderer process await prepareRenderer(RENDERER_PATH, PORT); const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, // Be cautious with nodeIntegration, consider contextBridge for security contextIsolation: false // For simplicity, but consider true with preload scripts } }); // Load the Next.js app if (process.env.NODE_ENV === 'development') { // In development, load from the Next.js development server await win.loadURL(`http://localhost:${PORT}`); } else { // In production, load the static 'out' directory generated by 'next export' await win.loadFile(path.join(RENDERER_PATH, 'out', 'index.html')); } } // Electron app lifecycle events app.whenReady().then(createWindow); app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } });
Debug
Known issues
gotchaAs of version 3.0.4, `electron-next` no longer uses `peerDependencies`. Users must explicitly install `electron` and `next` in their project's `dependencies`.
fix
Ensure `electron` and `next` are listed in your project's `package.json` dependencies and installed (e.g., `npm install electron next` or `yarn add electron next`).
affects: >=3.0.4
gotchaWhen initializing `prepareRenderer`, the `port` argument defaults to `8000`. If this port is already in use, the Next.js development server will fail to start.
fix
Pass a specific, unused port number as the second argument to `prepareRenderer(path, myCustomPort)` or set `process.env.ELECTRON_NEXT_PORT`.
affects: >=3.0.0
gotchaVersions prior to 3.1.1 had known issues running on Windows, potentially causing application failures or unexpected behavior.
fix
Upgrade to `electron-next@3.1.1` or newer to ensure full compatibility and stability on Windows operating systems.
affects: <3.1.1
gotchaVersions prior to 3.1.2 did not properly handle spaces in the application name, which could lead to build or runtime errors.
fix
Upgrade to `electron-next@3.1.2` or newer. If stuck on an older version, avoid spaces in your application's directory or name.
affects: <3.1.2
Errors
Common errors & fixes
Error: Cannot find module 'electron-next'
The `electron-next` package has not been installed or is not correctly linked in the project.
fix
Run `npm install electron-next` or `yarn add electron-next` in your project's root directory.
Error: listen EADDRINUSE: address already in use :::8000
Another process is already using the default port 8000, preventing the Next.js development server from starting.
fix
Specify an alternative port for `prepareRenderer` (e.g., `await prepareRenderer(path, 8001)`) or ensure no other applications are using port 8000.
Error: ENOENT: no such file or directory, stat '/path/to/your/app/renderer/out/index.html'
In production mode, Electron cannot find the built Next.js application files. This usually means `next export` was not run or the `path` argument to `prepareRenderer` is incorrect.
fix
Ensure you have run `next build && next export` in your Next.js renderer directory and that the `path` argument points to the correct location of your Next.js application.
ReferenceError: require is not defined (in a browser-like context)
Attempting to use `require()` in an Electron renderer process where `nodeIntegration` is disabled and `contextIsolation` is enabled, or attempting to use `import` without proper module configuration.
fix
For Electron's main process, `require()` is standard. For renderer processes, if `nodeIntegration` is false and `contextIsolation` is true, use a preload script and `contextBridge` to expose Node.js APIs or switch to ESM imports if your project is configured for it.
Upgrade
Version history
3.1.5latest on npm
Audit
Dependencies
electronrequiredRequired as the host application framework for desktop applications.
nextrequiredThe web framework electron-next integrates for the renderer process.
Agent activity
4 hits · last 30 days
node
4
Resources
githubhttps://github.com/leo/electron-next ↗
packagehttps://www.npmjs.com/package/electron-next ↗
electron-next — npm install electron-next · libregistry