# supabase-learn

**Repository Path**: bellable/supabase-learn

## Basic Information

- **Project Name**: supabase-learn
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-12
- **Last Updated**: 2026-03-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<a href="https:demo-nextjs-with-supabase.vercel.app/">
  <img alt="Next.js and Supabase Starter Kit - the fastest way to build apps with Next.js and Supabase" src="https:demo-nextjs-with-supabase.vercel.app/opengraph-image.png">
  <h1 align="center">Next.js and Supabase Starter Kit</h1>
</a>

<p align="center">
 The fastest way to build apps with Next.js and Supabase
</p>

<p align="center">
  <a href="#features"><strong>Features</strong></a> ·
  <a href="#demo"><strong>Demo</strong></a> ·
  <a href="#deploy-to-vercel"><strong>Deploy to Vercel</strong></a> ·
  <a href="#clone-and-run-locally"><strong>Clone and run locally</strong></a> ·
  <a href="#feedback-and-issues"><strong>Feedback and issues</strong></a>
  <a href="#more-supabase-examples"><strong>More Examples</strong></a>
</p>
<br/>

## Features

- Works across the entire [Next.js](https:nextjs.org) stack
  - App Router
  - Pages Router
  - Proxy
  - Client
  - Server
  - It just works!
- supabase-ssr. A package to configure Supabase Auth to use cookies
- Password-based authentication block installed via the [Supabase UI Library](https:supabase.com/ui/docs/nextjs/password-based-auth)
- Styling with [Tailwind CSS](https:tailwindcss.com)
- Components with [shadcn/ui](https:ui.shadcn.com/)
- Optional deployment with [Supabase Vercel Integration and Vercel deploy](#deploy-your-own)
  - Environment variables automatically assigned to Vercel project

## Demo

You can view a fully working demo at [demo-nextjs-with-supabase.vercel.app](https:demo-nextjs-with-supabase.vercel.app/).

## Deploy to Vercel

Vercel deployment will guide you through creating a Supabase account and project.

After installation of the Supabase integration, all relevant environment variables will be assigned to the project so the deployment is fully functioning.

[![Deploy with Vercel](https:vercel.com/button)](https:vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-supabase&project-name=nextjs-with-supabase&repository-name=nextjs-with-supabase&demo-title=nextjs-with-supabase&demo-description=This+starter+configures+Supabase+Auth+to+use+cookies%2C+making+the+user%27s+session+available+throughout+the+entire+Next.js+app+-+Client+Components%2C+Server+Components%2C+Route+Handlers%2C+Server+Actions+and+Middleware.&demo-url=https%3A%2F%2Fdemo-nextjs-with-supabase.vercel.app%2F&external-id=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-supabase&demo-image=https%3A%2F%2Fdemo-nextjs-with-supabase.vercel.app%2Fopengraph-image.png)

The above will also clone the Starter kit to your GitHub, you can clone that locally and develop locally.

If you wish to just develop locally and not deploy to Vercel, [follow the steps below](#clone-and-run-locally).

## Clone and run locally

1. You'll first need a Supabase project which can be made [via the Supabase dashboard](https:database.new)

2. Create a Next.js app using the Supabase Starter template npx command

   ```bash
   npx create-next-app --example with-supabase with-supabase-app
   ```

   ```bash
   yarn create next-app --example with-supabase with-supabase-app
   ```

   ```bash
   pnpm create next-app --example with-supabase with-supabase-app
   ```

3. Use `cd` to change into the app's directory

   ```bash
   cd with-supabase-app
   ```

4. Rename `.env.example` to `.env.local` and update the following:

  ```env
  NEXT_PUBLIC_SUPABASE_URL=[INSERT SUPABASE PROJECT URL]
  NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=[INSERT SUPABASE PROJECT API PUBLISHABLE OR ANON KEY]
  ```
  > [!NOTE]
  > This example uses `NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY`, which refers to Supabase's new **publishable** key format.
  > Both legacy **anon** keys and new **publishable** keys can be used with this variable name during the transition period. Supabase's dashboard may show `NEXT_PUBLIC_SUPABASE_ANON_KEY`; its value can be used in this example.
  > See the [full announcement](https:github.com/orgs/supabase/discussions/29260) for more information.

  Both `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY` can be found in [your Supabase project's API settings](https:supabase.com/dashboard/project/_?showConnect=true)

5. You can now run the Next.js local development server:

   ```bash
   npm run dev
   ```

   The starter kit should now be running on [localhost:3000](http:localhost:3000/).

6. This template comes with the default shadcn/ui style initialized. If you instead want other ui.shadcn styles, delete `components.json` and [re-install shadcn/ui](https:ui.shadcn.com/docs/installation/next)

> Check out [the docs for Local Development](https:supabase.com/docs/guides/getting-started/local-development) to also run Supabase locally.

## Feedback and issues

Please file feedback and issues over on the [Supabase GitHub org](https:github.com/supabase/supabase/issues/new/choose).

## More Supabase examples

- [Next.js Subscription Payments Starter](https:github.com/vercel/nextjs-subscription-payments)
- [Cookie-based Auth and the Next.js 13 App Router (free course)](https:youtube.com/playlist?list=PL5S4mPUpp4OtMhpnp93EFSo42iQ40XjbF)
- [Supabase Auth and the Next.js App Router](https:github.com/supabase/supabase/tree/master/examples/auth/nextjs)




## RLS 行级策略
举例 select
```bash
alter policy "Enable read access for all users"
on "public"."books"
to public
using (
  true
);
```

验证是否开启RLS
```
SELECT tablename, rowsecurity 
FROM pg_tables 
WHERE schemaname = 'public' AND tablename = 'books';
```


## 数据库
yarn 表
-- yarns 表
create table yarns (
  id uuid default gen_random_uuid() primary key,
  buyer text not null default 'me',
  brand text not null,
  product_line text not null,
  color_name text not null,
  color_code text,
  total_grams numeric not null,
  remaining_grams numeric not null,
  purchase_date date not null,
  total_price numeric not null,
  fiber_content text,
  ply text,
  needle_size_mm text,
  purchase_channel text,
  photos text[], -- 存储图片 URL 数组
  ravelry_pattern_ids text[],
  tags text[],
  notes text,
  location text,
  created_at timestamp with time zone default now(),
  user_id uuid references auth.users not null
);

## React 代码基础


依赖为空数组时，useEffect代码只在：
 1. 客户端执行
 2. 组件挂载后执行
 3. 不会在服务器执行

为什么不能在代码中执行new Data()给字段赋值？？？？

![alt text](1.png)


React 的 Hydration 机制要求：
服务器生成的 HTML和客户端首次渲染的 Virtual DOM两者必须完全一致

![alt text](2.png)
为什么这是最佳实践？
SEO友好：服务器能生成有意义的HTML
性能好：用户立即看到"加载中..."，而不是空白
无Hydration错误：保证服务器和客户端首次渲染一致

用户体验好：加载状态给用户反馈









| 类型 | 能否 async | 能否用 useState/useEffect | 用途 |
|------|-----------|--------------------------|------|
| Server Component | ✅ 可以 | ❌ 不行 | 获取数据、访问数据库、渲染静态内容 |
| Client Component | ❌ 不行 | ✅ 可以 | 交互、状态、浏览器 API |


| 场景 | 客户端组件（直播） | 服务器组件（电影拍摄） |
|------|------------------|---------------------|
| 观众看到什么 | 实时画面（不能卡顿） | 成品影片（已剪辑好） |
| 能否暂停？ | ❌ 不能（必须实时输出） | ✅ 能（拍完再剪） |
| 异步操作 | 必须用 `useEffect` 延后 | 可以直接 `await` |

| 说法 | 是否正确 | 说明 |
|------|--------|------|
| “React 组件必须同步” | ✅ 对客户端组件成立 | 浏览器环境限制 |
| “服务器组件可以 async” | ✅ 正确 | 服务端预渲染，不违反同步渲染原则 |
| “规则被打破了” | ❌ 错误 | 规则依然有效，只是适用范围不同 |



| 组件类型 | 能否用 `useEffect` | 能否发用户相关请求 | 适合场景 |
|--------|------------------|------------------|--------|
| Server Component | ❌ | ❌ | 获取公共数据、SEO 内容、静态渲染 |
| Client Component | ✅ | ✅ | 用户交互、私有数据、动态状态 |


客户端组件必须同步返回 JSX，但可以使用 useState 和自定义 Hooks；
服务器组件可以 async 获取数据，但不能使用任何 Hooks。”
💡 注意：没有“浏览器组件”这个说法，标准术语是 客户端组件（Client Component） vs 服务器组件（Server Component）
🧠 一句话口诀（帮你记忆）
“服务端拿数据（可异步），客户端搞交互（用 Hooks）；
渲染 JSX 都同步，只是舞台不一样。”
📌 关键澄清
所有组件最终都必须同步返回 JSX
→ 服务器组件是在 await 完成后同步返回
→ 客户端组件是一开始就同步返回（异步逻辑放在 useEffect 里）
Hooks = 客户端专属
因为 useState、useEffect 依赖浏览器的 React 运行时，服务端没有“状态更新”概念
async = 服务端专属（在组件顶层）
因为只有服务端能“提前准备好数据再渲染”，浏览器必须立刻响应




客户端组件必须同步返回 JSX



| 条件 | 能否用于 Server Component？ |
|------|---------------------------|
| 1. 函数名以 `use` 开头 + 用了 `useState`/`useEffect` 等 | ❌ 不能（这是 React Hook，客户端专属） |
| 2. 是普通 `async` 函数（无 React Hooks） | ✅ 能（只要它用的是服务端 API，如数据库、服务端 Supabase） |
| 3. 调用了浏览器 API（fetch 到 `/api`、localStorage 等） | ❌ 不能（服务端无法访问这些） |