在 Next.js 中使用 Supabase
学习如何创建 Supabase 项目、添加示例数据并从 Next.js 应用进行查询。
1
创建一个Supabase项目
前往 database.new 并创建一个新的Supabase项目。
当您的项目启动并运行后，前往 表编辑器，创建一个新表并插入一些数据。
或者，您可以在项目的 SQL编辑器 中运行以下代码片段。这将创建一个包含一些示例数据的 instruments 表。
12345678910111213-- 创建表create table instruments ( id bigint primary key generated always as identity, name text not null);-- 向表中插入一些示例数据insert into instruments (name)values ('violin'), ('viola'), ('cello');alter table instruments enable row level security;通过添加RLS策略，使表中的数据可公开读取：
1234create policy "public can read instruments"on public.instrumentsfor select to anonusing (true);2
创建 Next.js 应用
使用 create-next-app 命令和 with-supabase 模板，创建一个预配置了以下功能的 Next.js 应用：
1npx create-next-app -e with-supabase3
声明 Supabase 环境变量
将 .env.example 重命名为 .env.local 并填入您的 Supabase 连接变量：
Project URL
Anon key
12NEXT_PUBLIC_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>NEXT_PUBLIC_SUPABASE_ANON_KEY=<SUBSTITUTE_SUPABASE_ANON_KEY>4
从 Next.js 查询 Supabase 数据
在 app/instruments/page.tsx 创建新文件并填入以下内容。
这将从 Supabase 的 instruments 表中选择所有行并在页面上渲染它们。
12345678import { createClient } from '@/utils/supabase/server';export default async function Instruments() { const supabase = await createClient(); const { data: instruments } = await supabase.from("instruments").select(); return <pre>{JSON.stringify(instruments, null, 2)}</pre>}