鐵人檔案
Full Stack Web Development with Next.js, Supabase, Typescript, tailwindcss, and graphGL
確認再 Next 下，安裝 tailwindcss 後，執行程式沒問題，可以開始設計頁面了。 首先，設計主畫面：在 app(supabase-watchme)...
新增 Navbar 至每個網頁頂端：利用 Next 的 Layout 元件，來建立每個網頁都可以看到的 Navbar。新增 components/Layout....
Supabase:到 supabase.com 用您的 github 帳號註冊，出現下面驗證畫面， 驗證成功後，會進到 supabase dashboard。進...
讀取 Supabase 資料首先安裝 supabase-js： npm i @supabase/supabase-js 接著，在根目錄，建立 client.j...
將 Supabase 資料秀在螢幕上從 Supabase 成功讀取資料後，要秀出這些資料在螢幕上，需要兩個動作。每一個影像(image)需要一個圖片卡來放圖片及...
繼續加其他文字資料到圖卡上，增加圖片 title 到圖卡上。在 /components/ImageCard.js 加上下列指令。 <div classNa...
更改網頁的 title，建立 Meta 元件：(1)更改網頁 title 及其他 meta 資料(2)更改 Contact Us 網頁 title(3)更改個別...
Next 支援 API Routes 所以我們可以很容易的為我們的 app 建立一個 API。首先，在 pages/api/ 目錄內，新增 pages/api/...
(1) push 程式碼到 gitHub(2) Import 華國美學畫廊(image gallery app) 到 Vercel(3) 3-1 環境變數(En...
新增資料到 Supabase， 以華國美學影像資料檔為例：建立(Create) 新的資料到 Supabase 資料庫： const {data, error}...
