Category: Front-End

前端 將以下程式碼貼上 app/ai-chat/page.tsx 後端 使用server action 架構，將以下程式碼貼上app/actions/aiChatActions.ts 環境變數設定 將 NVIDIA…

一、導覽與結構類 (Navigation & Layout) Navbar（導覽列） 位於頁面頂端或側邊，包含網站主要連結（Logo、選單、搜尋、登入）。是使用者定位與跳轉的核心。 Sidebar（側邊欄） 垂直排列於畫面左側或右側的導覽區塊，常見於後台管理系統與文件網站。 Breadcrumb（麵包屑） 顯示目前頁面在網站階層中的位置，例如「首頁…

建議了解以下文章內容後再往下讀： https://hyc.eshachem.com/program/js-callback-hell/ https://hyc.eshachem.com/program/js-defensive-function/ https://hyc.eshachem.com/program/tcp-keep-alive/ 我最近都在用Next.js進行全端開發，想當然爾第一個遇到的問題就是：怎麼接DB？因此這裏提供解法並詳細說明我後來的寫法~！ 這裏先show出程式碼： 基礎設定 接着再來逐行解釋如下： 定義一個名為 getRequiredEnv…

防禦型函式 Defensive Function 一種源自於防禦性程式設計（Defensive Programming）的寫法，簡單來說就是「我不信任任何外部輸入的資料，一定會有人搞砸（例如忘記設定環境變數），所以我要在最前端築起一道防護牆。」 無防禦性寫法 如果開發的人忘記在 .env 設定 DB_PASSWORD，就會因爲收到…

回呼地獄 Callback Hell，又稱「毀滅金字塔」（Pyramid of Doom）。 簡單來說，它是指當你需要連續執行多個非同步操作（例如：先讀取檔案 A，拿到 A 的內容後再去查資料庫 B，查完資料庫再呼叫…

寫一個文件關於，useState 和UseEffect，不管是教學這兩個hook如何使用又或者是用這兩個hook寫了個小專題的專題文件都可以! (建議以Hack MD完成，練習Markdown語法) 方案 A：教學文件 不要只是說明和解釋，要能「用自己的話把複雜觀念講清楚」。 【作業目標】 請撰寫一篇技術教學文件（格式可為 Markdown,…

適用環境：Next.js 14+ App Router、Server action、NextAuth.js v4、TypeScript目標：照本文件從零完成 Google 單一登入（SSO），含登入頁、Session 讀取、未登入導回、登出。最後更新日期：06/14/2026 ｜…

MongoDB 詳細操作: https://www.notion.so/Use-MERN-stack-to-dev-Full-Stack-web-2d59def5443d80a194a5e8d6bf6d740a 我們建立好叢集和集合後，就可以去Next.js 寫上環境設定和連接了! 如果在本地測試都OK，部屬到Vercel就不行了，可能要在Vercel中加上環境變數! 環境設定 可以在專案中的 DataBase &…

開發時常常遇到：需要讓他人預覽專案、卻又不便直接上傳至正式環境的需求。ngrok是一個方法，之前我有寫過，不過雖然用 ngrok 很方便，但 ngrok 本質上是將本地 Port 映射至公開網址，一旦電腦重啟、進入休眠或不慎關閉程式，連線就會中斷。所以缺點是它必須「一直開著」 因此更穩定的雲端預覽方案，還能順便檢查部署狀況、做後續的流量分析，那麼 Vercel 會是我優先首選!…

一個迷你小小專案，練習了一下跨裝置跨頁面的同步，想說那順便寫成一個技術文件好了也順便練習。 1. Project Overview 本專案實作了一套「一端控制、多端同步」的即時互動系統。管理者可透過網頁按鈕，觸發所有連線手機的視覺特效（紅包雨），且無距離限制。於2026春節實作。 2. System Architecture 3. Key…