Day 18 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (10) -- API 元件

2022 iThome 鐵人賽

DAY 18

Modern Web

Full Stack Web Development 網站實作系列第 18 篇

Day 18 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (10) -- API 元件

14th鐵人賽

tjabi

2022-10-03 23:34:36

302 瀏覽

分享至

Next 支援 API Routes 所以我們可以很容易的為我們的 app 建立一個 API。
首先，在 pages/api/ 目錄內，新增 pages/api/images.js，在網頁上它的路徑會被標示為 localhost:3000/api/images。
pages/api/images.js 內容如下：

import { supabaseAdmin } from "../../client";

export default async function handler(req, res) {
    const result = await supabaseAdmin
    .from('images')
    .select('id, title, description, imageSrc')
    res.json(result.data)
}

這個 API，有所有圖片的明細資料和來源網址。