技術 第四關 - Supabase CLI（上）- 安裝、設定、指令

Supabase CLI 是開發者在本地環境中管理 Supabase 專案的強大工具。透過 CLI，你可以在本地建立完整的 Supabase 開發環境，包括資...

技術 第三關 - Supabase 官方文件導覽

今天要介紹的是 Supabase 的官方文件中導覽列，摘要整個網站的文件，將幫助你快速了解 Supabase 的各項功能，後續文章將介紹使用方式。 官網文件導...

技術 第二關 - Supabase 從零基礎到專業開發者

為什麼 Supabase 適合所有人？ Supabase 就像主角獨自擁有的「系統」，裡面有各種不同複雜度的工具，能在這個工具箱中找到適合自己目前技能水平的工...

技術 第一關 - 打造全端應用的秘密武器：Supabase

故事介紹 「身為前端開發者，是否也曾為後端開發頭痛？」 大家好我是William，身為前端開發者，在開發自己的專案時，經常需要處理後端的資料庫、認證等功能。傳...

技術 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...