讀取 Supabase 資料
首先安裝 supabase-js：

npm i @supabase/supabase-js

接著，在根目錄，建立 client.js 檔案，輸入下面內容：

// client.js
import { createClient } from '@supabase/supabase-js'

export const supabaseAdmin = createClient(
          process.env.NEXT_PUBLIC_SUPABASE_URL,
          process.env.SUPABASE_SERVICE_ROLE_KEY
);

完成這些動作，就建立了 Supabase Client 端了。再加上昨天建立的 .env.local，我們就可以使用 Supabase 的資料了。可以執行 npm run dev，看這些檔案和設定有沒有問題。

接下來，修改 /pages/index.js 程式，因為我們的資料不會變動頻繁，可以用 Next 的 getStaticProps 函數。 m用這個函數，我們可以抓取(fetch) 在 Server 的資料，且將資料以 props 屬性，傳回給 page 中預設輸出的 React 元件，在我們這個例子中，就是 Home 這個元件。

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

export default function Home({ twimgs }) {

  console.log(twimgs);
  return (
    <div className="bg-gray-700">
      <Hero />
    </div>
  )
}

export async function getStaticProps() {
   
   // 呼叫(call) 讀取方法和傳遞資料的API link
  const { data } = await supabaseAdmin.from('images').select('*');
  const twimgs = data
  
  // 傳回結果：名為 twimgs 放在 props 裡
  return {
    props: { twimgs }
  }
}

執行 npm run dev，看傳回那些資料。因為程式中我們使用 console.log() 所以到瀏覽器的 console 看傳回資料， 或者在終端機上也看傳回的資料。
瀏覽器畫面：(紅框部分)

終端機畫面：(紅框部分)

接下來，要新增能秀出這些資料在螢幕上的元件。