#分享 Spotify Now Playing 小工具 SpotLive

大家好～最近 side project 做了一個 Spotify 的小工具，想分享給大家 SpotLive 是什麼 SpotLive 是一個 drop-in 的 Spotify "Now Playing" widget，給 Next.js 用的。走 shadcn/ui 風格，安裝超簡單，一行 CLI 指令就搞定。它會直接把 SpotLive.tsx 元件和 /api/spotify route handler 複製到你的專案裡。怎麼用跑完指令後輸入 Spotify Client ID 和 Secret 就好了，超級無腦。功能亮點 - Two variants：有兩種樣式可以選，一個是會轉的黑膠唱片風格，會從旁邊 peek 出來。另一個是精簡的導覽列 player pill，適合放 header - Real Spotify integration：串接 Spotify API，用 server-side OAuth refresh token flow，token 安全不外洩 - Demo mode：不想設定 Spotify 也沒差，傳 demoData 進去就會自動輪播假資料，方便開發測試 - 超輕量：不依賴任何 UI 庫或額外 runtime，維護成本超低技術要求 Node 18+，Next.js App Router，Tailwind CSS。就這樣。連結 GitHub:

NPM:

項目網站（有假資料 Demo 的樣子可以看）：

歡迎大家去玩看。有 bug 或功能建議直接開 issue 或 PR 給我。如果覺得不錯也請幫我點個星星，謝謝大家