Building Production-Grade Web Applications with Supabase – Part 1

(This post was originally published on Baby Programmer)

I'm working through David Lorenz's book Building Production-Grade Web Applications with Supabase (affiliate link) and just finished Chapter 2 - Setting Up Supabase with Next.js. I've run into a few issues and figured I'd share them along with how I've fixed them.

Section: Initializing and testing the base Supabase JavaScript client within Next.js

Error: Parsing ecmascript source code failed

One is instructed to use the following code to check for Supabase buckets:

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

Unfortunately, this will result in the following error:

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

Fortunately, the fix is quite simple, add an opening brace immediately following .then((result) => :

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

Error: ReferenceError: useEffect is not defined

Once the above error has been resolved we hit our next one:

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

The issue is that we haven't imported useEffect from React for use on this page. Doing so is simple, add an import for useEffect immediately after the import for Image:

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

Error: Ecmascript file had an error

You'll be immediately greeted with yet another error:

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

Luckily, the solution is once again quite simple. At the top of the file add "use client"; like so:

"use client";

import Image from "next/image";

Section: Using the Supabase client with Pages Router and App Router

Subsection: Utilizing createBrowserClient on the frontend

The first issue we run into isn't really an error, its more that some of the instructions may not be entirely clear to some readers. The reader is instructed to update the createSupabaseClient function to use createBrowserClient like so:

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

Where that ... is one shouldn't literally place ..., rather one should insert the contents that previously were within createClient(), e.g. the final code should look like:

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

We are then instructed to make two relatively small adjustments to the client.js file:

We rename the file from client.js to browserClient.js

We rename createSupabaseClient to getSupabaseBrowserClient

But this creates some additional work for us, unless your editor picks up and auto-corrects the changes:

First, we need to update our import in page.js:

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

Next, we need to update our instantiation of the client in page.js:

const supabase = getSupabaseBrowserClient();

We are told that:

"In VS Code, you can press F2 to rename createSupabaseClient. It will automatically be renamed across your project. If you change a filename, VS Code should also pick up the references and refactor the path in other files accordingly."

(I was using Cursor and the changes were not picked up...could certainly have been the connection between the chair and the keyboard in this case)

Subsection: Utilizing createServerClient on the backend

This section is quite long and a bit confusing, as Lorenz acknowledges.

There is one block of code that is particularly confusing:

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

At first glance it can seem like we are performing the same step twice. It's easy to overlook that the first instance is modifying the request cookies while the second is modifying the response cookies.

The Rest

I skipped the section on using createServerClient with the Pages Router, I'm working on a greenfield project at the moment, if I need to work with a Next.js using Pages Router I can always revisit.

The section on Connecting directly to the database is fairly basic, if you are familiar with SQL db's it makes intuitive sense.

The section on using TypeScript is primarily about running a single command to generate (and then regenerate, as needed) type definitions.

The chapter closes out with basic examples of creating a client for Nuxt 3 (Vue) and Python.

The End

And that's the conclusion of chapter 2. Now wasn't that post just gripping?

The above is the detailed content of Building Production-Grade Web Applications with Supabase – Part 1. For more information, please follow other related articles on the PHP Chinese website!