Use Case
You have one Next.js repo and run npm run dev directly. You want multiple Spaces workspaces active at once, each with isolated services and browser tabs.
Guide: Next.js (No Docker)
Use this when your frontend runs directly on your machine (no containers) and you want multiple workspaces with isolated services and stable URLs.
Project Settings Explained
Services
frontendDeclare a named service per workspace. Spaces assigns each service its own local port and a stable URL, so two branches can both run a dev server without collisions.
Setup Script
npm i
cp .env.example .envnpm i ensures dependencies are present in new workspaces.cp creates an independent .env copy per workspace. Copy is safer when you want branch-local env edits. A symlink keeps one source of truth, but changes affect all workspaces and can cause surprising cross-branch coupling. Swap .env.example for any real path you maintain — Spaces does not provide a built-in shared env file.
Processes
PORT=$SPACES_FRONTEND_PORT npm run devThis binds Next.js to the service's assigned local port, so browser sessions target the correct workspace instance.
Browser Sessions
$SPACES_FRONTEND_URLBrowser session URLs should use named services so each workspace opens its own app tab reliably. $SPACES_FRONTEND_URL resolves to http://frontend.<slug>.localhost:7391, routed by the bundled Caddy proxy. Chrome treats *.localhost as a secure context, so this works over plain HTTP without certificates.