frontend-nextjs

Adds a Next.js dev-server process service to an existing project.

What gets added

[runtime.node]
version = "22"

[services.frontend]
type = "process"
command = "npm run dev -- -p $PORT"
cwd = "./frontend"
port = "auto"

Next.js's dev CLI takes -p <port> to override the default 3000; the recipe forwards the orchestrator-allocated port through that flag.

What you need to do

Create the Next.js project at the target cwd before unibench start:

cd ~/Documents/unibench/my-project
npx create-next-app@latest frontend
cd frontend && npm install && cd ..
unibench start

The create-next-app defaults (App Router, TypeScript) all work with the recipe as-is — nothing in the manifest depends on a particular Next.js feature set.

Customizing

  • Turbopack vs webpack. Recipe-default npm run dev uses whatever the package.json script defines. Set --turbo in your dev script if you want it; the manifest doesn't care.
  • Standalone build for prod-mirroring. Replace command with command = "node .next/standalone/server.js" once you've built; add a pre_start = ["npm run build"] hook to rebuild on each start.
  • App at the root, not ./frontend. Apply with --cwd "." and adjust your package.json's scripts accordingly.

Common gotchas

  • Next.js binds 0.0.0.0 by default. Not a problem on a single-user Mac but it does mean LAN clients can hit it. Add -H 127.0.0.1 to the command if you want strict loopback.
  • HMR + the orchestrator's port shuffle. Next.js's HMR socket uses the same port as the dev server, so the orchestrator's port allocation is enough. No extra config needed.
  • App Router + edge runtime. Same — the dev server handles both the Node and the edge code paths.