Membina Aplikasi Web Gred Pengeluaran dengan Supabase - Bahagian 1

(Siaran ini pada asalnya diterbitkan di Baby Programmer)

Saya sedang mengusahakan buku David Lorenz Membina Aplikasi Web Gred Pengeluaran dengan Supabase (pautan gabungan) dan baru sahaja menamatkan Bab 2 - Menyediakan Supabase dengan Next.js. Saya telah menghadapi beberapa isu dan fikir saya akan berkongsinya bersama-sama dengan cara saya membetulkannya.

Bahagian: Memulakan dan menguji klien JavaScript Supabase asas dalam Next.js

Ralat: Menghuraikan kod sumber ecmascript gagal

Seseorang diarahkan untuk menggunakan kod berikut untuk menyemak baldi Supabase:

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

Malangnya, ini akan mengakibatkan ralat berikut:

 ⨯ ./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 '}'

Nasib baik, pembaikan agak mudah, tambah pendakap pembukaan serta-merta berikutan .then((result) => :

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

Ralat: ReferenceError: useEffect tidak ditakrifkan

Setelah ralat di atas telah diselesaikan, kami menekan yang seterusnya:

⨯ 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'
}

Isunya ialah kami tidak mengimport useEffect daripada React untuk digunakan pada halaman ini. Melakukannya adalah mudah, tambahkan import untuk useEffect sejurus selepas import untuk Imej:

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

Ralat: Fail Ecmascript mempunyai ralat

Anda akan segera disambut dengan satu lagi ralat:

⨯ ./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

Nasib baik, penyelesaiannya sekali lagi agak mudah. Di bahagian atas fail tambahkan "gunakan klien"; seperti itu:

"use client";

import Image from "next/image";

Bahagian: Menggunakan klien Supabase dengan Penghala Halaman dan Penghala Apl

Subseksyen: Menggunakan createBrowserClient pada bahagian hadapan

Isu pertama yang kami hadapi bukanlah satu ralat, malah beberapa arahan mungkin tidak jelas sepenuhnya kepada sesetengah pembaca. Pembaca diarahkan untuk mengemas kini fungsi createSupabaseClient untuk menggunakan createBrowserClient seperti:

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

Di mana itu ... seseorang tidak sepatutnya meletakkan ..., sebaliknya seseorang itu harus memasukkan kandungan yang sebelum ini berada dalam createClient(), mis. kod akhir sepatutnya kelihatan seperti:

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

Kami kemudiannya diarahkan untuk membuat dua pelarasan yang agak kecil pada fail client.js:

Kami menamakan semula fail daripada client.js kepada browserClient.js

Kami menamakan semula createSupabaseClient untuk mendapatkanSupabaseBrowserClient

Tetapi ini menghasilkan beberapa kerja tambahan untuk kami, melainkan editor anda mengambil dan membetulkan perubahan secara automatik:

Pertama, kami perlu mengemas kini import kami dalam page.js:

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

Seterusnya, kami perlu mengemas kini instantiasi pelanggan kami dalam page.js:

const supabase = getSupabaseBrowserClient();

Kami diberitahu bahawa:

"Dalam Kod VS, anda boleh menekan F2 untuk menamakan semula createSupabaseClient. Ia akan dinamakan semula secara automatik merentas projek anda. Jika anda menukar nama fail, Kod VS juga harus mengambil rujukan dan memfaktorkan semula laluan dalam fail lain dengan sewajarnya."

(Saya menggunakan Kursor dan perubahan tidak diambil...sudah tentu sambungan antara kerusi dan papan kekunci dalam kes ini)

Subseksyen: Menggunakan createServerClient pada bahagian belakang

Bahagian ini agak panjang dan agak mengelirukan, seperti yang Lorenz akui.

Terdapat satu blok kod yang sangat mengelirukan:

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

Pada pandangan pertama, nampaknya kita sedang melakukan langkah yang sama dua kali. Sangat mudah untuk terlepas pandang bahawa contoh pertama mengubah suai kuki permintaan manakala yang kedua mengubah suai kuki respons.

Selebihnya

Saya melangkau bahagian tentang menggunakan createServerClient dengan Pages Router, saya sedang mengusahakan projek greenfield pada masa ini, jika saya perlu bekerja dengan Next.js menggunakan Pages Router, saya sentiasa boleh melawat semula.

Bahagian mengenai Menyambung terus ke pangkalan data adalah agak asas, jika anda biasa dengan SQL db, ia masuk akal secara intuitif.

Bahagian menggunakan TypeScript adalah terutamanya tentang menjalankan satu arahan untuk menjana (dan kemudian menjana semula, seperti yang diperlukan) takrif jenis.

Bab ini ditutup dengan contoh asas mencipta klien untuk Nuxt 3 (Vue) dan Python.

Akhir

Dan itulah kesimpulan bab 2. Sekarang bukankah jawatan itu hanya mencengkam?

Atas ialah kandungan terperinci Membina Aplikasi Web Gred Pengeluaran dengan Supabase - Bahagian 1. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!