發表文章

目前顯示的是 7月, 2024的文章

[Next.js][App router]在LINE內瀏覽器內多選檔案/圖檔觸發onchange事件的問題

圖片
因為遭遇了在Android手機LINE瀏覽器內使用網頁時,當設定input type="file"容許多選,在onchange事件取不到多選的檔案。 *我實測若點了界面上的...按鈕,選其他資料夾內的檔案,則不會取不到多選檔案,初步判定是LINE瀏覽器與Android系統之間的溝通問題* 因為暫時還沒有好的方式,所以就在網頁上顯示提示,然後請不能接受的使用者移動到外部瀏覽器來觀看。 下圖是LINE瀏覽器的user agent字串於三星s22手機上

解決Firebase部屬失敗HTTP Error: 401, Request had invalid authentication credentials.

圖片
這幾天寫了好幾個功能,今天想要部屬到Firebase時發生了401部屬錯誤,完整訊息如下: Error: HTTP Error: 401, Request had invalid authentication credentials. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project. 該怎麼處理呢? 

[Next.js][App router]使用Route Handler處理檔案上傳(Firebase hosting/Cloud functions)

一個會員網站提供上傳個人圖檔是一個很基本的應用。現在如AI解析及互動上也會需要用到圖檔、聲音,甚至是影片來提供服務,所以上傳檔案是一件稀鬆平常的事情。 當然,firebase中,可以透過使用Firebase storage的前端套件來快速的完成這件事情,不需要額外思考檔案上傳背後的問題。然而,當你沒有使用Firebase Auth來作會員登入系統,你馬上就面臨資料隱私的兩難問題。 你的Firebase storage存取規則無法檢驗存取的是否為用戶,且無法依照會員角色來區分存取權限。直到最後你只能妥協,將storage存取權限完全開放,使得上傳功能與用戶資料完全裸奔在網際網路上。在App router中透過Route Handler,我們可以管控會員是否有上傳與存取的權利。

[Next.js][App router]使用Server Action操作MongoDB基礎方式

圖片
這篇簡要的彙整成6個步驟,演示如何以以Server Action在Next.js中操作MongoDB,輸入新的資料。 演示成果可 點擊這裡進入[輸入時顯示候選清單]

解決zip解壓縮檔案名稱亂碼問題windows&ubuntu

圖片
久久遇到一次的老問題,安裝其他解壓縮軟體就能無痛處理。

[Next.js][App router]分享使用自幹auth模組的元件及Server Action

圖片
因為NextAuth無法直接在Firebase hosting上使用所以開始自幹一個auth模組,這篇分享一些關於模組週邊使用的5項程式碼。 分享以下5類程式碼 AuthSessionProvider.tsx layout.tsx middleware.tsx Server Actions Components

[Next.js][App router]將URL參數的訊息顯示在網頁中Typescript

圖片
使用URL的參數(URL parameter)來顯示訊息是一種方便的作法。在SPA中也能使用,不需要有後端server的幫助。 這裡整理React.js和Next.js中用URL parameter來顯示訊息的方法,由於Next.js App router,這裡會都演示一次。