Veröffentlichen

Erstelle den Build, lege Metadaten fest und deploye Acme Deploys.

Die App dieses Kapitels läuft in deiner Konsole. Öffne sie mit ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C (zuerst Entwicklerfunktionen aktivieren), dann probiere sie aus.
Kapitel ansehen3:04

In diesem Kapitel

  • Build
  • Metadata
  • Statisches Hosting
  • Vor dem Deployen

text build erzeugt einen statischen Client und, wenn du Route-Handler hast, einen Server für text start.

Build

bun run build
   ▼ Text.js 1.0.1 (Turbolog)   Creating an optimized console production build... ✓ Compiled successfully in 0.8s ✓ Collecting route data ✓ Generating static console cells (3/4) ✓ Prerendering console shells (3/3) ✓ Prerendering curl frames (3/3) ✓ Finalizing console optimizationRoute (app)                              Type       Target┌ ○ /                                    Static     console.log (%c)├ ○ /_not-found                          Static     console.log (%c)├ ○ /deployments                         Static     console.log (%c)├ ƒ /deployments/[id]                    Dynamic    console.log (%c)├ ○ /settings                            Static     console.log (%c)└ ƒ /api/deployments                     Dynamic    Route Handler+ First Load JS shared by all             698.2 kB (241.6 kB gzip)○  (Static)   prerendered as static console cellsƒ  (Dynamic)  on-demand console reconciliation

text start liefert den Build aus und führt deine Route-Handler aus. Es läuft auf jedem Host mit Bun 1.2+ oder Node.js 22+.

Metadata

Lege den Titel des Browser-Tabs im Root-Layout fest. Seiten können ihn überschreiben.

app/deployments/page.tsx+1tsx
Hinzugefügt: export const metadata = { title: "Deployments" }; // → "Deployments · Acme"

Statisches Hosting

Ohne Route-Handler ist der Build eine reine statische Website. Jede statische Route erhält eine eigene HTML-Datei. Dynamische Routen wie /deployments/[id] werden über index.html ausgeliefert.

Auf Vercel und Cloudflare Pages erkennt text build die Plattform und schreibt diesen Fallback selbst. Andere statische Hosts benötigen eine Rewrite-Regel. Füge auf Netlify eine _redirects-Datei zu public/ hinzu:

public/_redirects+1text
Hinzugefügt: /*  /index.html  200

Netlify liefert vorhandene Dateien aus, bevor es die Regel anwendet. Assets und vorgerenderte Routen bleiben daher unverändert.

Vor dem Deployen

  • Deaktiviere Log beibehalten in deinen Konsoleneinstellungen. Auch deine Nutzer müssen diese Option deaktivieren.
  • Teste schmale Größen wie 80×24. Seitlich angedockte DevTools ergeben ein schmales Raster.
  • Führe bun test aus.

Drücke Enter in der Konsole, um zu deployen. Hol dir dann dein Zertifikat.

Ausprobieren

Das ist Acme Deploys am Ende des Kapitels, ausgeführt in DevTools. Klicke auf das Pad und nutze dann die Tasten unten.

▼ 10 · Veröffentlichen

Die Konsole öffnen

⌘⌥J
CtrlShiftJ
⌘⌥K
CtrlShiftK
⌘⌥C

Die App rendert in DevTools.Aktiviere zuerst „Funktionen für Webentwickler anzeigen“ unter Safari Einstellungen → Erweitert. Klicke dann hier und drücke Enter.

Auf einem Desktop öffnen

Diese App rendert in der DevTools-Konsole, die einen Desktop-Browser benötigt.

Quiz

2 Fragen

Beantworte jede Frage, um das Kapitel abzuschließen.

Was braucht ein statischer Host für dynamische Routen?

 

Welche Konsoleneinstellung sollte aus sein?