Nextjs+Supabase

📝 Next.js + Supabase

🚀 快速开始

前置条件：先创建一个Nextjs应用

npx create-next-app@latest

1. 设置 Supabase

1.1 创建 Supabase 项目

1. 访问 https://supabase.com
2. 登录并创建新项目
3. 等待项目初始化完成（约 1-2 分钟）

1.2 创建数据库表

1. 在 Supabase 控制台，点击 "SQL Editor"
2. 点击 "New query"

直接粘贴下面代码运行：

create table todos (
  id bigint generated by default as identity primary key,
  title text not null,
  completed boolean default false,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null
);

alter table todos enable row level security;

create policy "允许所有操作"
  on todos
  for all
  using (true)
  with check (true);

2. 配置环境变量

2.1 获取 Supabase 凭证

1. 在 Supabase 控制台，点击 Settings (齿轮图标)
2. 点击 API 标签
3. 复制：

   • Project URL

   • 

   • anon public key

   • 

2.2 创建 .env.local 文件（这个仅本地使用，vercel部署需要把环境变量导进去）

在项目根目录创建 .env.local 文件：

NEXT_PUBLIC_SUPABASE_URL=你的_项目_URL，见上面2.1图
NEXT_PUBLIC_SUPABASE_ANON_KEY=你的_anon_key，见上面2.1图

📌 重要: 替换为你自己的值！

4. 启动开发服务器

npm run dev

🔧 核心代码说明

连接 Supabase (utils/supabase.js)

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
)

export default supabase

读取数据

const { data, error } = await supabase
  .from('todos')
  .select('*')
  .order('created_at', { ascending: false })

插入数据

const { data, error } = await supabase
  .from('todos')
  .insert([{ title: '新的 todo', completed: false }])

更新数据

const { data, error } = await supabase
  .from('todos')
  .update({ completed: true })
  .eq('id', todoId)

删除数据

const { data, error } = await supabase
  .from('todos')
  .delete()
  .eq('id', todoId)

🚀 部署到 Vercel

点击vercel官网

1. 推送代码到 GitHub

git add .
git commit -m "Add Supabase integration"
git push

2.新建部署项目

2. 在 Vercel 添加环境变量

1. 进入你的 Vercel 项目
2. Settings → Environment Variables
3. 添加：
   • NEXT_PUBLIC_SUPABASE_URL = 你的 Supabase URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY = 你的 Supabase Anon Key
4. Save
   

3. 点击部署

Vercel 就会开始部署啦，后续只要往github的你这个项目推送代码，vercel会自动检测，自动更新，自动部署

部署过程可能会有的问题

检查nextjs版本和react版本，因为有一些版本因为2025年12月份重大安全漏洞问题，vercel不允许部署某些不安全的版本，

请保证你的项目next和react至少大于等于下面的版本

    "next": "16.0.7",
    "react": "19.2.1",
    "react-dom": "19.2.1"

❓ 部署后数据库常见问题

页面显示 "Failed to fetch" 错误

解决方法:

1. 检查 .env.local 文件是否存在且配置正确
2. supabase如果检查到7天内，你的数据库没有任何操作，就会给你关了，，请去supabase重新激活

看到 "relation does not exist" 错误

解决方法 :

运行 SQL_COMMANDS.sql 中的 SQL 命令创建表

Vercel 部署后不工作

解决方法:

1. 确认在 Vercel 项目设置中添加了环境变量
2. 重新部署项目

🎓 学习资源

• Supabase 官方文档
• Next.js 文档
• React 文档