Merilis

Build, atur metadata, dan deploy Acme Deploys.

Aplikasi bab ini berjalan di konsol Anda. Buka dengan ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C (aktifkan fitur pengembang terlebih dahulu), lalu coba aplikasinya.
Tonton bab3:04

Dalam bab ini

  • Build
  • Metadata
  • Hosting statis
  • Sebelum deploy

text build menghasilkan klien statis dan, jika Anda memiliki route handler, server untuk 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 menyajikan hasil build dan menjalankan route handler Anda. Perintah ini berjalan di host apa pun dengan Bun 1.2+ atau Node.js 22+.

Metadata

Atur judul tab browser di layout root. Halaman dapat menggantinya.

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

Hosting statis

Tanpa route handler, hasil build berupa situs statis biasa. Setiap route statis mendapat file HTML sendiri. Route dinamis seperti /deployments/[id] disajikan oleh index.html.

Di Vercel dan Cloudflare Pages, text build mendeteksi platform dan menulis fallback tersebut secara otomatis. Host statis lainnya memerlukan rewrite. Di Netlify, tambahkan file _redirects ke public/:

public/_redirects+1text
Ditambahkan: /*  /index.html  200

Netlify menyajikan file yang ada sebelum menerapkan aturan tersebut, sehingga aset dan route yang telah melalui prerender tidak terpengaruh.

Sebelum deploy

  • Nonaktifkan Simpan log di setelan konsol Anda. Pengguna Anda juga perlu menonaktifkannya.
  • Uji ukuran sempit seperti 80×24. DevTools yang ditambatkan ke samping menghasilkan kisi sempit.
  • Jalankan bun test.

Tekan Enter di konsol untuk deploy. Lalu klaim sertifikat Anda.

Coba

Ini Acme Deploys di akhir bab, berjalan di DevTools. Klik pad, lalu gunakan tombol di bawah.

▼ 10 · Merilis

Buka konsol

⌘⌥J
CtrlShiftJ
⌘⌥K
CtrlShiftK
⌘⌥C

Aplikasi ini di-render di DevTools.Aktifkan dahulu “Tampilkan fitur untuk pengembang web” di Setelan Safari → Lanjutan. Lalu klik di sini dan tekan Enter.

Buka di desktop

Aplikasi ini di-render di konsol DevTools, yang memerlukan browser desktop.

Kuis

2 pertanyaan

Jawab semua pertanyaan untuk menyelesaikan bab.

Apa yang dibutuhkan host statis untuk route dinamis?

 

Setelan konsol mana yang harus nonaktif?