(原文发表于程序员宝贝)
本文记录了我在阅读 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 部分的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号