使用 Supabase 建立生產級 Web 應用程式 - 第 1 部分

（這篇文章最初發表在寶貝程式設計師）

我正在閱讀 David Lorenz 的書《使用 Supabase 建立生產級 Web 應用程式》（附屬連結），並且剛完成第 2 章 - 使用 Next.js 設定 Supabase。我遇到了一些問題，我想分享一下這些問題以及我是如何解決這些問題的。

部分：在 Next.js 中初始化和測試基本 Supabase JavaScript 用戶端

錯誤：解析 ecmascript 原始碼失敗

指示使用以下程式碼來檢查 Supabase 儲存桶：

useEffect(() => {
    const supabase = createSupabaseClient();
    supabase.storage.listBuckets().then((result) =>
     console.log("Bucket List", result);
    });
}, []);

不幸的是，這將導致以下錯誤：

 ⨯ ./src/app/page.js:9:5
 Parsing ecmascript source code failed
   7 |     supabase.storage.listBuckets().then((result) =>
   8 |       console.log("Bucket List", result)
 > 9 |     });
     |     ^
  10 |   }, []);
  11 |
  12 |   return (

Expected ',', got '}'

幸運的是，修復非常簡單，只需在 .then((result) => :
之後添加一個左大括號即可

  useEffect(() => {
    const supabase = createSupabaseClient();
    supabase.storage.listBuckets().then((result) => {
      console.log("Bucket List", result)
    });
  }, []);

錯誤：ReferenceError：useEffect 未定義

解決上述錯誤後，我們將進行下一個錯誤：

⨯ ReferenceError: useEffect is not defined
    at Home (src/app/page.js:5:2)
  3 |
  4 | export default function Home() {
> 5 |   useEffect(() => {
    |  ^
  6 |     const supabase = createSupabaseClient();
  7 |     supabase.storage.listBuckets().then((result) => {
  8 |       console.log("Bucket List", result) {
  digest: '3325505329'
}

問題是我們還沒有從 React 導入 useEffect 來在這個頁面上使用。這樣做很簡單，在導入 Image 之後立即加入 useEffect 的導入：

import Image from "next/image";
import { useEffect } from "react";
import { createSupabaseClient } from "@/supabase-utils/client";

錯誤：Ecmascript 檔案有錯誤

您將立即收到另一個錯誤：

⨯ ./src/app/page.js:2:10
Ecmascript file had an error
  1 | import Image from "next/image";
> 2 | import { useEffect } from "react";
    |          ^^^^^^^^^
  3 | import { createSupabaseClient } from '@/supabase-utils/client';
  4 |
  5 | export default function Home() {

You're importing a component that needs `useEffect`. This React hook only works in a client component. To fix, mark the file (or its parent) with the `"use client"` directive.

 Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client

幸運的是，解決方案又非常簡單。在文件頂部新增「使用客戶端」；像這樣：

"use client";

import Image from "next/image";

部分：將 Supabase 用戶端與 Pages Router 和 App Router 結合使用

小節：在前端使用 createBrowserClient

我們遇到的第一個問題並不是真正的錯誤，更多的是一些說明對於某些讀者來說可能並不完全清楚。指示讀者更新 createSupabaseClient 函數以使用 createBrowserClient，如下：

import { createBrowserClient } from "@supabase/ssr";
export const createSupabaseClient = () => createBrowserClient(...);

其中...不應該從字面上放置...，而是應該插入先前在 createClient() 中的內容，例如最終程式碼應如下所示：

import { createBrowserClient } from "@supabase/ssr";
export const createSupabaseClient = () =>
    createBrowserClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
    );

然後我們被指示對 client.js 檔案進行兩個相對較小的調整：

我們將檔案從 client.js 重新命名為 browserClient.js

我們將 createSupabaseClient 重新命名為 getSupabaseBrowserClient

但這會為我們帶來一些額外的工作，除非您的編輯器接受並自動更正更改：

首先，我們需要更新 page.js 中的導入：

import { getSupabaseBrowserClient } from "@/supabase-utils/browserClient";

接下來，我們需要在 page.js 中更新客戶端的實例化：

const supabase = getSupabaseBrowserClient();

我們被告知：

「在VS Code 中，您可以按F2 重新命名createSupabaseClient。它將在您的專案中自動重新命名。如果您更改檔案名，VS Code 還應該取得引用並相應地重構其他檔案中的路徑。

（我使用的是遊標，但沒有看到更改...在這種情況下肯定是椅子和鍵盤之間的連接）

小節：在後端使用 createServerClient

正如 Lorenz 所承認的那樣，這部分相當長且有點令人困惑。

有一段程式碼特別令人困惑：

useEffect(() => {
    const supabase = createSupabaseClient();
    supabase.storage.listBuckets().then((result) =>
     console.log("Bucket List", result);
    });
}, []);

乍一看，我們似乎將同一步驟執行了兩次。很容易忽略第一個實例正在修改請求 cookie，而第二個實例正在修改回應 cookie。

其餘的部分

我跳過了有關將 createServerClient 與 Pages Router 一起使用的部分，我目前正在開發一個新項目，如果我需要使用 Pages Router 來處理 Next.js，我可以隨時重新訪問。

直接連接到資料庫的部分是相當基礎的，如果您熟悉 SQL 資料庫，那麼它就很直觀。

有關使用 TypeScript 的部分主要是關於執行單一命令來產生（然後根據需要重新產生）類型定義。

本章以為 Nuxt 3 (Vue) 和 Python 建立客戶端的基本範例結束。

結局

這是第二章的結論。那篇文章是不是很扣人心弦？

以上是使用 Supabase 建立生產級 Web 應用程式 - 第 1 部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！