Supabase 现在与 Next.js 14 兼容
内容提要
在Next.js Conf 2023上，Vercel发布了Next.js 14，主要提升了稳定性，特别是Server Actions的稳定性，并简化了用户认证和数据获取。Supabase与Next.js 14完全兼容，支持Server Components和Route Handlers。Supabase需配置为使用Cookies而非localStorage，并推出了@supabase/ssr包和Next.js与Supabase的启动模板，以便开发者快速构建应用。
延伸解读
为何 Supabase 需要适配 Next.js 14
Supabase 默认使用 localStorage 存储用户会话，这在客户端应用中运行良好，但在 Server Component 中会失败，因为服务器端没有 localStorage 概念。为了在 Next.js 14 的服务器端环境中正常工作，必须将 Supabase 配置为使用 Cookies 而非 localStorage。这一适配是 Supabase 与 Next.js 14 完全兼容的关键，也是推出 @supabase/ssr 包的原因。
@supabase/ssr 包与启动模板的价值
手动配置 Supabase 使用 Cookies 需要编写冗长且容易出错的代码，涉及 getItem、setItem、removeItem 等方法的自定义实现。@supabase/ssr 包封装了这些复杂逻辑，让开发者无需重复编写。此外，官方提供的 Next.js 与 Supabase 启动模板进一步简化了项目初始化，通过一条命令即可创建项目并引导配置环境变量，帮助开发者快速构建应用。
Next.js 14 稳定性提升对开发的影响
Next.js 14 的主要亮点是稳定性提升，特别是 Server Actions 被标记为稳定。这意味着开发者可以放心地在服务器端处理用户认证和数据变更，将 mutation 逻辑与负责数据获取和渲染的 Server Components 放在一起。这种模式简化了代码结构，减少了客户端与服务器之间的往返，提升了开发效率和应用的可靠性。
Q&A
Next.js 14的主要改进是什么？
Next.js 14主要提升了稳定性，特别是Server Actions的稳定性，并简化了用户认证和数据获取。
Supabase如何与Next.js 14兼容？
Supabase与Next.js 14完全兼容，支持Server Components和Route Handlers，并需配置为使用Cookies而非localStorage。
如何配置Supabase以支持Server Components？
需要将Supabase配置为使用Cookies而非localStorage，以便在Server Component中正常工作。
Supabase推出了哪些新工具以支持Next.js开发？
Supabase推出了@supabase/ssr包和Next.js与Supabase的启动模板，帮助开发者快速构建应用。
如何开始使用Supabase和Next.js？
可以通过命令'npx create-next-app@latest -e with-supabase'快速开始，页面会指导创建Supabase项目和配置环境变量。
为什么Supabase需要使用Cookies而不是localStorage？
因为在Server Component中没有localStorage的概念，所以Supabase需要使用Cookies来存储用户会话。
