【Next.js】常用 scripts 說明

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

📜 "scripts" 說明

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

1. "dev": "next dev"

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

• 🔁 支援 hot reload（你改檔案會自動重新載入）

• 🌐 開啟 http://localhost:3000

• ✅ 用於：開發、除錯、畫面確認、檢查 API

🧪 情境：

npm run dev
# 或
pnpm dev

2. "build": "next build"

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

• 會做：

  • 頁面預先產生（SSG）

  • Server-side 轉譯編譯（SSR）

  • Minify, tree shaking, code split...

• ❌ 不會啟動伺服器

🧪 情境：

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

3. "start": "next start"

🚀 啟動 Production 模式伺服器

• 需要先執行過 next build

• 適合用於正式環境或模擬正式環境（staging）

• 沒有 hot reload（因為是 production）

🧪 情境：

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

4. "lint": "next lint"

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

• 檢查：變數命名、語法錯誤、不一致縮排

• 如果你有設定 ESLint 設定檔（如 .eslintrc.js）會套用規則

🧪 情境：

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

🧠 小結（對照表）

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