Dev-server

← Developer-manual

2. Dev-server

Dev-flowet er Next.js's app-router med hot-reload. Her er konventioner og gotchas.

Start dev-server

npm run dev

Det starter Next.js på port 3000. Brug ALTID port 3000 — kode og links assume that hostname. Hvis 3000 er optaget, dræb processen i stedet for at lade Next falde tilbage til 3001:

$pids = Get-NetTCPConnection -LocalPort 3000,3001,3002,3003 -ErrorAction SilentlyContinue | Select-Object -ExpandProperty OwningProcess -Unique
foreach ($p in $pids) { Stop-Process -Id $p -Force -ErrorAction SilentlyContinue }

Hot-reload

Next.js auto-reloader når du gemmer en .tsx/.ts-fil. Komponent-ændringer er fast-refresh (state bevares); top-level-imports + page-shifts triggerer full reload.

Når hot-reload ikke virker: stop dev-server og start igen. Sker oftest når du ændrer på en server-component eller en route-handler.

Compile-fejl

Fejl ses i terminalen + i browser-overlay. Common patterns:

  • Module not found — har du glemt at installere en pakke? npm install <pkg>
  • Type error — meld om hvilken type der bryder. Brug as unknown as X kun sparsomt; helst fix root cause.
  • JSX-fejl — ofte fordi du har glemt at importere en komponent eller skrevet import { X } i stedet for import X

Server- vs client-components

Next 13+ skelner. Default: server-component (RSC). For client: tilføj "use client" øverst i fil.

  • Server-component — kan async/await, kan tilgå storage direkte, INGEN useState/useEffect/onClick
  • Client-component — kan bruge hooks, kan håndtere events, INGEN direct storage-access (skal hente via fetch/Server Action)

Når du importer en client-component i en server-component, bliver client-component-delen render'et browser-side. Modsat går ikke: en server-component i en client-component bliver til en runtime-fejl.

Debug-tilstand

For at se hvad der trækkes fra storage på en page-load, sæt:

DEBUG_STORAGE=1 npm run dev

(Vi har ikke standardiseret debug-flags endnu; brug console.log indtil videre.)

Browser dev-tools: åbn i Console fanen for klient-side-fejl. Network-fanen for API-calls. React Dev-tools-extension for component-tree.

Multi-tenant lokalt

For at switche mellem tenants under dev: gå til /<tenant-slug> direkte i browseren. Der er ingen subdomain-routing lokalt — alle tenants deler localhost:3000.

For at simulere custom domain lokalt (sjældent nødvendigt), edit hosts-fil og pege kunde.local → 127.0.0.1, derefter besøg http://kunde.local:3000. Middleware-flowet vil prøve at match domain mod customDomains på Tenants — har du den ikke sat på Tenants-row, falder den tilbage til default-routing.

Performance under dev

Next dev-server er ikke optimeret — den compiler routes on-demand. Forventet:

  • Første page-load efter restart: 5-30 sek
  • Hot-reload: <1 sek
  • Production-build (npm run build): 1-3 min

Hvis dev-server er pinligt langsom, tjek hvor mange filer der watches. Nogle gange hjælper det at slette .next/cache og restarte.

← Første clone og setup · Engine-arkitektur →