# 【Next.js】常用 scripts  說明

這段 `"scripts"` 通常定義在你的 `package.json` 中，是 **Next.js** 專案開發流程的基本指令集。下面我會逐一說明每個指令的用途、情境，以及何時使用：

---

## 📜 `"scripts"` 說明

```json
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

```

---

### 1. `"dev": "next dev"`

✅ **本地開發環境**使用，啟動熱重載伺服器。

- 🔁 支援 hot reload（你改檔案會自動重新載入）
- 🌐 開啟 [http://localhost:3000](http://localhost:3000/)
- ✅ 用於：開發、除錯、畫面確認、檢查 API

🧪 **情境：**

```bash
npm run dev
# 或
pnpm dev

```

---

### 2. `"build": "next build"`

🔨 **打包應用程式**，產生 `.next/` 目錄，準備部署。

- 會做：
    
    
    - 頁面預先產生（SSG）
    - Server-side 轉譯編譯（SSR）
    - Minify, tree shaking, code split...
- ❌ 不會啟動伺服器

🧪 **情境：**

```bash
npm run build
# -> 打包專案供 production 用

```

---

### 3. `"start": "next start"`

🚀 **啟動 Production 模式伺服器**

- 需要先執行過 `next build`
- 適合用於正式環境或模擬正式環境（staging）
- 沒有 hot reload（因為是 production）

🧪 **情境：**

```bash
npm run build
npm start
# -> 用於正式上線或部署伺服器中

```

---

### 4. `"lint": "next lint"`

🔍 使用 Next.js 的內建 ESLint 設定檢查程式碼品質。

- 檢查：變數命名、語法錯誤、不一致縮排
- 如果你有設定 ESLint 設定檔（如 `.eslintrc.js`）會套用規則

🧪 **情境：**

```bash
npm run lint
# -> 在部署前自動檢查程式碼品質

```

---

## 🧠 小結（對照表）

<table id="bkmrk-%E6%8C%87%E4%BB%A4-%E7%94%A8%E9%80%94-%E5%9F%B7%E8%A1%8C%E6%99%82%E6%A9%9F-%E6%98%AF%E5%90%A6%E6%AD%A3%E5%BC%8F%E7%94%A8%E9%80%94-de"><thead><tr><th>指令</th><th>用途</th><th>執行時機</th><th>是否正式用途</th></tr></thead><tbody><tr><td>`dev`</td><td>啟動開發伺服器</td><td>開發階段</td><td>❌</td></tr><tr><td>`build`</td><td>建立正式環境可執行檔</td><td>上線前打包</td><td>✅</td></tr><tr><td>`start`</td><td>啟動正式伺服器</td><td>上線後／模擬上線</td><td>✅</td></tr><tr><td>`lint`</td><td>檢查語法與格式</td><td>開發中、CI 中自動化流程檢查</td><td>✅</td></tr></tbody></table>

---

如果你想再加上測試、自動部署或 CI/CD 的 script，我也可以幫你補上建議範本。需要嗎？