技術 Build a guestbook with Next.js, NextAuth and Supabase (supabase + nextauth 開發auth登入留言板)

Stack Next.js as a framework NextAuth (Authentication for Next.js) Supabase (gu...

技術 Day 21 使用Next.js和 Supabase -- CRUD(2)

Twimg.js (Create 功能)TwUpdate.js (Update 功能)TwDelete.js (Delete 功能) // components...

技術 Day 19 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (11) -- Deploy佈署到 Vercel

(1) push 程式碼到 gitHub(2) Import 華國美學畫廊(image gallery app) 到 Vercel(3) 3-1 環境變數(En...

技術 Day 17 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (9) -- Head 元件

更改網頁的 title，建立 Meta 元件：(1)更改網頁 title 及其他 meta 資料(2)更改 Contact Us 網頁 title(3)更改個別...

技術 Day 16 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (8) -- 顯示 Supabase 資料在螢幕上

繼續加其他文字資料到圖卡上，增加圖片 title 到圖卡上。在 /components/ImageCard.js 加上下列指令。 <div classNa...

技術 Day 15 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (6) -- 顯示 Supabase 資料在螢幕上

將 Supabase 資料秀在螢幕上從 Supabase 成功讀取資料後，要秀出這些資料在螢幕上，需要兩個動作。每一個影像(image)需要一個圖片卡來放圖片及...

技術 Day 14 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (5) -- 讀取 Supabase 資料

讀取 Supabase 資料首先安裝 supabase-js： npm i @supabase/supabase-js 接著，在根目錄，建立 client.j...

技術 Day 13 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (4) -- Supabase

Supabase:到 supabase.com 用您的 github 帳號註冊，出現下面驗證畫面， 驗證成功後，會進到 supabase dashboard。進...

技術 Day 12 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (3) -- Navbar

新增 Navbar 至每個網頁頂端：利用 Next 的 Layout 元件，來建立每個網頁都可以看到的 Navbar。新增 components/Layout....

技術 [Day 10] Serverless Database - 我才不會喜歡上像 supabase 這樣的資料庫呢！！ |【搜尋引擎製作錄】

Github, Over Engineering 前面三篇我麼講述了如何實作網路爬蟲，從網頁上擷取資料。接下來我們要用一天的篇幅，簡單介紹如何將爬蟲所擷取的初始...

技術 Day 10 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (1)

這個 app 將從 supabase 讀取資料，在透過自製 Tailwind CSS 元件，呈現類似 netflix，hulu 的影像畫廊(image gall...