（原文发表于程序员宝贝）
本文记录了我在阅读 David Lorenz 的《使用 Supabase 构建生产级 Web 应用》（含附属链接）过程中，完成第二章——使用 Next.js 配置 Supabase 后遇到的问题及解决方法。
第一部分：在 Next.js 中初始化和测试基本 Supabase JavaScript 客户端
错误：解析 ECMAScript 源代码失败
书中示例代码用于检查 Supabase 存储桶：
<code class="javascript">useEffect(() => {
const supabase = createSupabaseClient();
supabase.storage.listBuckets().then((result) =>
console.log("bucket list", result);
});
}, []);</code>
运行后报错：
<code>⨯ ./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 '}'</code>
解决方法：在 .then((result) => 后添加左大括号 {：
<code class="javascript">useEffect(() => {
const supabase = createSupabaseClient();
supabase.storage.listBuckets().then((result) => {
console.log("bucket list", result)
});
}, []);</code>
错误：ReferenceError: useEffect 未定义
修复上述错误后，出现新的错误：
<code>⨯ 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'
}</code>
原因是缺少 React 的 useEffect 导入。解决方法：在导入语句中添加 useEffect：
<code class="javascript">import image from "next/image";
import { useEffect } from "react";
import { createSupabaseClient } from "@/supabase-utils/client";</code>
错误：ECMAScript 文件有错误
紧接着又出现错误：
<code>⨯ ./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</code>
解决方法：在文件顶部添加 "use client";：
<code class="javascript">"use client"; import image from "next/image";</code>
第二部分：将 Supabase 客户端与 Pages Router 和 App Router 结合使用
小结：在前端使用 createBrowserClient
书中建议使用 createBrowserClient 代替 createClient，并对 client.js 文件进行修改，重命名为 browserClient.js 并将 createSupabaseClient 重命名为 getSupabaseBrowserClient。 这需要更新 page.js 中的导入语句和客户端实例化代码。 VS Code 的重命名功能可以简化这个过程。
小结：在后端使用 createServerClient
书中关于在后端使用 createServerClient 的部分较为冗长且易混淆。 代码片段：
<code class="javascript">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);
});
},</code>
需要注意的是，这段代码并非重复操作，而是分别修改了请求 Cookie 和响应 Cookie。
其余部分
文章略过了 Pages Router 的部分，并简要介绍了数据库连接、TypeScript 类型定义生成以及 Nuxt 3 和 Python 的客户端示例。
总结
本文总结了第二章的内容，并对遇到的问题进行了详细的阐述和解答。
