📌 本主題系列大部分皆為 AI 生成後潤飾
📌 生成本主題系列的工作流程請參考另一個主題系列：[我無限升級，30天解鎖獨自升級金手指！你老闆不能知道的 AIGC 效率激增工作流]
📌 文中使用『引用格式』代表輸入的 Prompt

💡
這是輸入的 Prompt

⚠️ 天才與瘋子只有一線之隔，使用 AIGC 請注意幻覺的副作用，建議搭配應用領域的相關 domain 服用。
⚠️ 由於 AIGC 突飛猛進，本系列介紹的工具版本可能快速的變更而有所差異

在瀏覽器中構建全端應用：探索 bolt.new 的強大功能

你是否曾想過在瀏覽器中輕鬆構建前端組件，並高效地編輯、安裝套件、運行後端，甚至直接部署到 Netlify？現在，一切皆有可能！讓我們一起探索由 StackBlitz 推出的 bolt.new，一個結合 Vercel、Cursor 和 Cloud Artifacts 特點的強大工具，而且完全免費！

什麼是 bolt.new？

bolt.new 是一個全新的開發平台，允許你在瀏覽器中提示、運行、編輯和部署全端 Web 應用。它具備直觀的介面，類似 ShadCN 的設計風格，支援最新的程式語言和框架，如 React、Next.js、Remix、SvelteKit、Vite 等。

為何選擇 bolt.new？

• 全瀏覽器開發：無需本地環境設置，一切都在瀏覽器中完成。
• AI 智能協助：內建 AI，可以在你遇到錯誤時自動協助修復，提高開發效率。
• 一鍵部署：輕鬆將應用部署到 Netlify 或 Cloudflare，無需額外設定或登入。
• 免費使用：目前完全免費，未來可能會有付費方案，但現在是體驗的最佳時機。

開始使用 bolt.new

創建新項目

1. 打開瀏覽器，訪問 bolt.new。

2. 在首頁，你可以選擇預設的模板（如 Next.js、React、Remix 等），或在下方的提示框中輸入你的需求。

3. 例如，輸入：

   建立一個使用 Next.js 和 ShadCN UI 的現代任務管理和日曆應用，類似 clickup.com，具備看板功能和多種特性。
   

4. 點擊「執行」，bolt.new 將自動生成項目並配置環境。

（截圖）

瀏覽和編輯代碼

• 左側是類似 VSCode 的編輯器，你可以查看和編輯項目的文件結構。
• 所有代碼都可以即時編輯，右側的預覽窗口會實時反映變化。

（截圖）

預覽應用

• 點擊上方的「Preview」標籤，查看應用的實時運行效果。
• 你可以在應用中測試功能，如添加任務、切換日曆等。

（截圖）

處理錯誤

• 如果遇到錯誤，bolt.new 會自動檢測並在介面中提示。
• 點擊「Fix Errors」，AI 會自動協助你修復問題。

（截圖）

部署應用

• 完成開發後，點擊右上角的「Deploy」按鈕。
• 選擇部署到 Netlify 或 Cloudflare，無需登入或額外設定。
• 部署完成後，你將獲得一個可共享的網址。

（截圖）

自行託管 bolt.new

如果你希望自行託管 bolt.new，以下是步驟：

前置準備

• 你需要一個 Anthropic API Key。

步驟

1. 克隆存儲庫

   git clone https://github.com/stackblitz/bolt
   

2. 安裝依賴項

   cd bolt
   npm install
   

3. 設置環境變數

   • 在項目根目錄下創建一個 .env.local 文件。

   • 添加以下內容，替換為你的 API Key：

     ANTHROPIC_API_KEY=你的API金鑰
     

4. 運行開發伺服器

   npm run dev
   

5. 訪問應用

   • 在瀏覽器中打開 http://localhost:5173，即可使用自行託管的 bolt.new。

（截圖）

注意事項

• 自行託管版本可能在速度上稍慢，但你將擁有更多控制權。
• 如果遇到問題，可以在 GitHub 上提交 Issue。

總結

bolt.new 為開發者帶來了全新的體驗，讓你可以在瀏覽器中高效地構建全端應用。儘管目前還有一些性能上的限制，但其強大的功能和便利性讓人對未來充滿期待。