使用 Supabase 构建生产级 Web 应用程序 - 第 1 部分

一分耕耘，一分收获！既然都打开这篇《使用 Supabase 构建生产级 Web 应用程序 - 第 1 部分》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

（原文发表于程序员宝贝）

本文记录了我在阅读 David Lorenz 的《使用 Supabase 构建生产级 Web 应用》（含附属链接）过程中，完成第二章——使用 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 导入。解决方法：在导入语句中添加 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";

第二部分：将 Supabase 客户端与 Pages Router 和 App Router 结合使用

小结：在前端使用 createBrowserClient

书中建议使用 createBrowserClient 代替 createClient，并对 client.js 文件进行修改，重命名为 browserClient.js 并将 createSupabaseClient 重命名为 getSupabaseBrowserClient。 这需要更新 page.js 中的导入语句和客户端实例化代码。 VS Code 的重命名功能可以简化这个过程。

小结：在后端使用 createServerClient

书中关于在后端使用 createServerClient 的部分较为冗长且易混淆。 代码片段：

setAll(cookiesToSet) {
  cookiesToSet.forEach(({ name, value, options }) => {
    request.cookies.set(name, value);
  });
  response.value = NextResponse.next({
    request,
  });
  cookiesToSet.forEach(({ name, value, options }) => {
    response.value.cookies.set(name, value, options);
  });
},

需要注意的是，这段代码并非重复操作，而是分别修改了请求 Cookie 和响应 Cookie。

其余部分

文章略过了 Pages Router 的部分，并简要介绍了数据库连接、TypeScript 类型定义生成以及 Nuxt 3 和 Python 的客户端示例。

总结

本文总结了第二章的内容，并对遇到的问题进行了详细的阐述和解答。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《使用 Supabase 构建生产级 Web 应用程序 - 第 1 部分》文章吧，也可关注golang学习网公众号了解相关技术文章。