前言 營養師不開菜單系列來到第三十天，首先謝謝有觀看到最後一天的讀者，也恭喜堅持到最後一天的你和我。在部署之後，應用程式上線後，我們就這樣結束了嗎？還是我們可...
歷經前兩天的後端部署示範，終於也到了前端的部署了，這篇文章會介紹如何將 Next.js 的前端部署到 Vercel。 前端部署的選擇 前端部署的方式有很多，參考...
前言 專案建置的最後一哩路，就是讓整個應用程式上線，而在我們的專案小作品中，需要一個平台讓我們部署，並公開網站。Next.js 的母公司 Vercel 提供了一...
這篇文章的主要內容 簡單介紹 SSR & Next.js CSR( Client Side Rendering) 在前面有提到 react 是一個 C...
前言 SEO，是搜尋引擎最佳化 (Search Engine Optimization) 的簡稱，是一套策略技術，幫助提升網站或網頁在搜尋引擎裡的曝光度。主要的...
前言 在開發前端應用時，不良的錯誤處理可能導致使用者困惑、挫折，甚至選擇放棄使用你的應用。所以在專案中，我們透過 try-catch 語句捕捉潛在錯誤，並使用...
現在的 SVG 與 PNG 的表單都建立完成，不過 SVG 建立 QR code 圖片的部分，現在是用 Next.js 提供的 Image 元件來顯示，但一開始...
前言 接續著上一篇的前端實作分享，我們介紹完 NavBar 的核心功能邏輯以及響應式設計，這篇文章中我們的焦點將轉向「登入/註冊頁面」，深入挖掘使用者認證的細節...
之前在開發 API 的時候，有寫一隻比較簡單的建立 QR code 的 API，但是後來都沒用到，所以這篇文章會來建立一個表單元件來使用這隻 API。 建立表單...
在接續後面的開發之前，可以先來嘗試測試佈署 static site 到雲服務上，這邊我會使用 Firebase Hosting 與 Vercel，再也不需要把...
上一篇文章已經把原本新增 QR code 的 SVG 表單，重構成一個元件來使用，接下來會新增另一個元件，來製造 QR code 的 PNG 圖片。 不過在此之...
前言 Middleware 在網頁應用程式中的角色，猶如機場的安檢機制。每當我們在機場搭乘飛機時，必須經過嚴格的安檢程序，以確保旅程的安全和暢通。同理，每一個進...
前情提要：上一篇把 page.tsx 中的表單部分重構整理成一個新的元件，不過搬移的過程中，有一些問題沒有處理好，所以這篇就來處理一下。 如何傳遞 errors...
在前面我們建構了很多 API 的功能與 SaaS 服務供應商的整合，現在終於來到 Web 的部分了。 在這邊我選用的是 React 陣營的 Next.js...
前言 在上一章節，我們對請求數據進行了深入的驗證。透過多層篩選和檢查，對於不同的驗證結果，我們已經設定了相對應的錯誤回應。但是，我們還沒有詳細探討在哪些特定情境...
現在 page.tsx 的程式碼已經有點多了，而且之後還要新增一個產生 PNG 的表單，所以現在就把原本產生 SVG 的表單重構成元件，這樣之後要新增表單的時候...
前言 在設計完畫面後，也大概確認了整個專案的頁面功能，在設置完資料夾結構後，就是進入前端後端實作的階段，大部分的頁面我是前後端功能同步進行，但為了避免畫面凌亂，...
現在的頁面只有一個產生 SVG 的表單，不過我們還有一個比較簡單的產生 PNG 的表單還沒有做出來，但在做之前，我想先把目前的狀態使用狀態管理工具來管理，這樣之...
前言 在前15篇章節中，已經詳細介紹了專案中使用的套件及在專案中的具體實作方式。接下來的文章將深入探討專案的細節和商業邏輯。考慮到這是一個從零開始建立的產品，我...
現在當選擇類別後，不管輸入什麼文字，結果都可以送出表單，並且產生錯誤的 QR code，這樣並不是我們想要的結果，所以這篇文章將會示範如何設定正規表達式來驗證輸...
前一篇文章示範了如何使用 Form 表單送出資料，不過這個表單並沒有做任何的驗證處理，例如：使用者沒有輸入資料、輸入的資料格式不正確等等，這些都是需要處理的，這...
Cloudinary 是一個雲端媒體管理平台，主要提供需要大量處理及優化圖片及影片的開發者管理及優化服務，可以藉由平台上傳、儲存及管理資源，並且讓媒體資源在不...
上一篇文章示範了如何使用 GET 方法去取得 PNG 的 QR Code，這一篇文章則是要示範如何使用 POST 方法去取得 PNG 的 QR Code，並且會...
React-Hook-Form 是一個輕量的 React 表單驗證和管理套件，核心是運用 React Hooks API 來進行管理狀態和表單操作，讓 Rea...
設定網站的 UI 新增完專案後，就可以開始建立這個網站的 UI 了，首先要看這個網站有哪些功能，然後來決定需要哪些畫面，這個網站目前有以下幾個功能： 選擇 Q...
吃水果好麻煩，買來之後洗完還要削皮去籽再切一切，但我還是想要天然的維生素礦物質啊!那為什麼我不買果汁喝就好？在使用 Redux 跟 Context API 的...
Next.js 是一個極受歡迎的 React 框架，專為 Server Side Rendering（SSR）、Static Side Generation（S...
NextAuth.js 是專為 Next.js 設計的身份驗證套件。提供了一種簡單的方法來添加 OAuth、電子郵件和其他多種身份驗證方式，我們就不需要編寫繁...
TailwindCSS 與 Headless UI 就像用原型食物去做烹煮，而不是經過非常多製程的加工食品。當我們使用它們時，我們得到的是最基本、最純粹的成分，...
職位描述: 負責平台級線上遊戲網站 iGaming 應用產品的架構設計和開發工作; 參與前端前沿技術、理念的跟進、預研和落地; 參與前端技術架構、規範、研發流...
ysl0628
Bucky
evan_hsu
Bill
iThome鐵人賽
看影片追技術