（原文发表于程序员宝贝）
本文记录了我在阅读 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:5parsing 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:10ecmascript 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 部分的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1500691.html
微信扫一扫 
支付宝扫一扫 
