Spaces
Download

Next.js (Docker Compose)

Use this when your app runs in containers and you want workspace-isolated host ports with clear container visibility.

Use case

Your Next.js service runs through Compose. You need branch-isolated environments and a predictable port mapping per workspace.

Project settings explained

Services

frontend

Spaces assigns each service its own host port per workspace. Compose maps host $SPACES_FRONTEND_PORT to container port 3000.

docker-compose.yml example

services:
  web:
    build: .
    ports:
      - "${SPACES_FRONTEND_PORT}:3000"
    environment:
      - PORT=3000

Setup script

cp .env.example .env

Copying .env gives each workspace its own env file; a symlink would reduce duplication, but one edit would then affect every linked workspace. Point cp at whatever seed file your repo keeps, Spaces has no built-in shared env file.

Processes

SPACES_FRONTEND_PORT=$SPACES_FRONTEND_PORT docker compose up --build

Keeping Compose attached in one terminal is useful for live logs and an interactive shutdown.

Browser sessions

$SPACES_FRONTEND_URL

This targets the workspace-specific service mapping. Without a named service, one workspace could open another workspace's frontend by accident.

Stop script: stop vs down

docker compose stop
# or
docker compose down
  • docker compose stop: stops containers, keeps networks, volumes, and containers for a faster resume.
  • docker compose down: removes containers and the network, a cleaner reset with a slower next startup.
  • Use stop for day-to-day pause and resume, and down when you need a clean teardown.
← All recipes