The Astro CLI

หากคุณเคยรัน next dev คุณรู้ pattern นี้แล้ว Astro มาพร้อม binary astro ตัวเดียวที่จัดการทุกขั้นตอนของ development lifecycle — dev server, production build, local preview, integration scaffolding และ type checking โดยแมปกับคำสั่ง Next.js CLI ที่คุณใช้อยู่ทุกวันได้แทบทุกคำสั่ง

คำสั่งหลัก

# Start the dev server (hot module reloading, port 4321 by default)
npx astro dev

# Production build → dist/
npx astro build

# Serve the dist/ folder locally (mirrors the production build exactly)
npx astro preview

# Add an official integration and update astro.config.mjs automatically
npx astro add react
npx astro add tailwind
npx astro add sitemap

# Type-check all .astro and .ts files
npx astro check

package.json scripts

ทั้งสอง framework ใช้ convention เดียวกันในการตั้งชื่อย่อให้กับคำสั่ง CLI ใน scripts

// package.json — Next.js project
{
  "scripts": {
    "dev":         "next dev",
    "build":       "next build",
    "start":       "next start",
    "lint":        "next lint",
    "type-check":  "tsc --noEmit"
  }
}

// package.json — Astro project
{
  "scripts": {
    "dev":     "astro dev",
    "build":   "astro build",
    "preview": "astro preview",
    "check":   "astro check"
  }
}

สองสิ่งที่ควรสังเกต:

astro preview คือ local preview server — ไม่ใช่ production server จริง ใช้ adapter (Node, Vercel, Cloudflare) สำหรับ SSR production จริงๆ
astro check แทนที่สองขั้นตอน tsc --noEmit + linter ที่โปรเจกต์ Next.js มักต้องดูแลแยกกัน

คำสั่ง `astro add`

npx astro add scaffold official integrations ในขั้นตอนเดียว: ติดตั้ง npm package, อัปเดต astro.config.mjs และพิมพ์สิ่งที่เปลี่ยนแปลง

# Add the React integration (enables .tsx islands)
npx astro add react

# Add Tailwind CSS
npx astro add tailwind

# Add the Vercel SSR adapter
npx astro add vercel

# Add multiple at once
npx astro add react tailwind sitemap

ไม่มีสิ่งเทียบเท่าใน Next.js — ใน Next คุณต้อง npm install package แล้วอัปเดต next.config.js ด้วยตนเอง คำสั่ง astro add อัตโนมัติขั้นตอน config ให้

CLI flags

# Custom port
astro dev --port 3000

# Bind to all interfaces (useful in Docker / WSL)
astro dev --host

# Verbose output during build
astro build --verbose

# Watch mode for astro check (re-runs on file save)
astro check --watch

อัปเกรด: Astro 5 → 7

npx @astrojs/upgrade จะ bump astro และ integration @astrojs/* ทุกตัวไป major ล่าสุด จากนั้นไล่ตาม checklist นี้ (ครอบคลุม breaking change ทั้งของ v6 และ v7):

ต้องใช้ Node 22.12+ (Astro 7 มาพร้อม Vite 8 และ bundler Rolldown)
Content collections: ทุก collection ต้องมี loader (glob()/file() จาก astro/loaders); entry.slug → entry.id; entry.render() → render(entry); import z จาก astro/zod
API ที่ถูกถอด: Astro.glob() → import.meta.glob(); <ViewTransitions /> → <ClientRouter />; prefetch(url, { with }) → prefetch(url); session driver ใช้ object sessionDrivers.redis({...}) ไม่ใช่ string
Config flag: ลบ experimental.cache, experimental.routeRules, experimental.rustCompiler, experimental.queuedRendering, experimental.advancedRouting, experimental.logger ออก — ตอนนี้เป็น top-level หรือเป็นค่าเริ่มต้นแล้ว
Template: แก้ tag ที่ไม่ปิดหรือซ้อนผิด (compiler ที่เขียนด้วย Rust จะ error แทนการแก้ให้อัตโนมัติ) และเติม {" "} ในจุดที่เคยพึ่ง whitespace จากการขึ้นบรรทัดใหม่ (compressHTML: 'jsx' เป็นค่าเริ่มต้น)
Markdown: Sätteri เป็น processor ค่าเริ่มต้น ถ้าจะใช้ remark/rehype plugin ต่อให้ตั้ง markdown.processor: unified() จาก @astrojs/markdown-remark
หายไปถาวร: @astrojs/db (ใช้ node:sqlite, Drizzle หรือ DB แบบ hosted แทน) และ event constant ของ astro:transitions (ใช้ชื่อ event แบบ string)