DMarlon Studio

Chapter 7

Web with Next.js

Next.js web pages: the design is the page and the code is JavaScript with React.

Creating a Next.js page

When you create the app, choose Web (Next.js). The design is the page and the code is the same JavaScript as Electron (it runs in the browser), with the same components (all but the menu). The studio generates a Next.js project (app router) in build/nextjs.

  • Run (F9) starts the Next.js development server and opens the browser when it is ready. Next.js, React and Electron are installed once and shared by every project.
  • this.storage saves data in the browser; this.currentTab() returns the page itself and this.runInPage(function) runs it there.
  • Debug turns your breakpoints into debugger;: open the browser tools (F12) and it will stop at them.
  • Export the Next.js project creates a folder ready for npm install and npm run dev, or for deploying to Vercel.