Sunkoro Logo
Sunkoro
登入
首頁
關於講師
意見回饋
© 2026 Sunkoro 上課摟!
條款·隱私
Vibe Coding 教學:用 Next.js 快速做出網站,並部署到 Vercel — Sunkoro | Sunkoro
NEXT.JS · VERCEL · 2026.06.14初學者友善敬請期待

Vibe Coding 教學:用 Next.js 快速做出網站,並部署到 Vercel

預告中
敬請期待
課程內容正在準備中,正式開放時間將於近期公布。

從自然語言到公開網址的一條簡單路線

入門教學簡報:用 Vibe Coding 思維和 AI 協作,從需求描述、Next.js 建立專案、AI 產生第一版、GitHub 版本管理,到 Vercel 快速部署上線。

敬請期待

這門課目前為預告狀態,正式開放時間將於近期公布。

三大實戰單元

實戰開發與部署流程

每個單元都包含實用技巧、程式範例與完整實作指引

🧭
需求變成 Prompt
非工程師也能做的產品描述

把觀眾、任務、成功狀態寫清楚,讓 AI 產生更穩定的第一版。

🧱
Next.js Landing Page
可跑、可點、可迭代

用 app/page.tsx 建立課程介紹、價格、FAQ、報名表單與成功狀態。

🌐
Vercel Deploy
從本機到公開網址

透過 GitHub repo 接到 Vercel,建立可分享、可更新的網站部署流程。

你將學會...

上完這堂課,你能做到什麼?

理解 Vibe Coding 的協作心法:人負責目標與判斷,AI 負責加速初版
把模糊想法改寫成 AI 能執行的產品需求
用 Next.js 建立可預覽的本機網站專案
請 AI 產生課程頁、表單與成功狀態等可用流程
用 GitHub 保存版本,並接到 Vercel 自動部署
用使用者與工程師雙視角檢查上線前品質
課程內容

3 個專題 · 11 個單元

從工具設定到完整作品,逐步引導

Vibe Coding 是什麼
先講結果,不先講技術
好的 prompt 要像產品需求
為什麼用 Next.js
建立專案並啟動 localhost
請 AI 修改 app/page.tsx
先做可用流程,再修細節
推到 GitHub 準備部署
在 Vercel Import Project
部署後用使用者角度重走流程
工程師補上型別、驗證、環境變數與可靠性
加入課程後你將獲得
互動式投影片14 張 · 全螢幕 · 隨時複習
適合對象

這堂課適合你嗎?

想用 AI 快速做出網站原型的初學者
需要把課程、活動或服務頁快速上線的創作者
想把 AI 納入前端開發流程的工程師
正在學 Next.js、GitHub 與 Vercel 部署流程的人
常見問題

有任何疑問嗎?

不需要。這堂課先教你怎麼描述需求、檢查流程,再用 AI 和 Next.js 做出可跑的第一版。

有。工程師可以把 AI 當成初版產生器,課程也會提醒型別、驗證、環境變數與部署檢查等品質把關。

會。課程路線包含 GitHub 版本管理與 Vercel Import Project,目標是取得可分享的公開網址。

準備好開始了嗎?
用 AI 打造你的第一個 App
預告中
敬請期待
課程內容正在準備中,正式開放時間將於近期公布。
其他課程
課程互動投影片 — Slide 01 / 45
🔒 限定
38 張
謝上智 Sun

Google AI Studio 三小時工作坊

謝上智 Sun•2026.05.17•3 小時
NT$ 790NT$ 1,490-47%
UNITY AR · ADVANCED
Unity AR × Gemini AI 進階實戰
40 張
謝上智 Sun

Unity AR × Gemini AI 進階實戰

謝上智 Sun•2026.05.15•3 小時
免費
Google AI Studio 介面 — 免費即開即用,只需 Google 帳號
謝上智 Sun

想法實現機

謝上智 Sun•2026.05.14•1 小時
免費