Supabase を使用した本番グレードの Web アプリケーションの構築 – パート 1

(この投稿はもともと Baby Programmer に公開されたものです)

私は David Lorenz の著書『Building Production-Grade Web Applications with Supabase』 (アフィリエイトリンク) に取り組んでおり、第 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)
    });
  }, []);

エラー: 参照エラー: 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」を追加します。同様に:

"use client";

import Image from "next/image";

セクション: Pages Router および App Router での Supabase クライアントの使用

サブセクション: フロントエンドでの createBrowserClient の利用

最初に遭遇する問題は実際にはエラーではなく、一部の指示が一部の読者にとって完全に明確ではない可能性があるということです。リーダーは、次のように createBrowserClient を使用するように createSupabaseClient 関数を更新するように指示されます。

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 ファイルに 2 つの比較的小さな調整を行うように指示されます。

ファイルの名前を 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 氏も認めているように、このセクションは非常に長く、少しわかりにくいです。

特に混乱を招くコード ブロックが 1 つあります。

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

一見すると、同じステップを 2 回実行しているように見えるかもしれません。最初のインスタンスがリクエスト Cookie を変更し、2 番目のインスタンスが応答 Cookie を変更していることは見落とされがちです。

残り

Pages Router での createServerClient の使用に関するセクションはスキップしました。現在、グリーンフィールド プロジェクトに取り組んでいます。Pag​​es Router を使用して Next.js を操作する必要がある場合はいつでも再確認できます。

データベースへの直接接続に関するセクションはかなり基本的なものであり、SQL データベースに精通していれば直感的に理解できます。

TypeScript の使用に関するセクションでは、主に単一のコマンドを実行して型定義を生成 (必要に応じて再生成) する方法について説明します。

この章は、Nuxt 3 (Vue) と Python 用のクライアントを作成する基本的な例で終わります。

終わり

これが第 2 章の結論です。この投稿は単に心を掴むものではありませんでしたか?

以上がSupabase を使用した本番グレードの Web アプリケーションの構築 – パート 1の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。