使用强大的next.js +Supabase全栈能力

# 背景

我目前使用next.js +Supabase技术栈构建全栈应用程序，但是不清楚如何更好的集成使用。

这篇文章帮助更好地理解和使用这两个技术栈。以下是关于 Supabase 的入门资料和知识点清单，帮助你更好地理解和使用这个强大的next.js +Supabase全栈能力。

# 知识点清单

项目设置
- 创建 Supabase 项目并获取 API 密钥。
- 配置环境变量以安全存储敏感信息。
数据库操作
- 创建表格、插入、更新和删除数据。
- 使用 SQL 查询语言进行复杂查询。
实时功能
- 实时监听数据变化，适用于聊天应用或动态更新的内容。
用户认证
- 支持邮箱/密码、社交媒体（如 Google、GitHub）等多种认证方式。
- 管理用户会话和权限控制。
文件存储
- 上传、下载和删除文件，适合处理用户上传的媒体内容。
API 集成
- 使用 RESTful API 与前端进行交互，支持 CRUD 操作。
安全性
- 使用 Row Level Security（RLS）来控制数据访问权限。
- 配置 API 密钥和访问策略以保护数据安全。
最佳实践
- 定期备份数据库。
- 使用版本控制管理代码和配置文件。
- 在生产环境中使用环境变量管理敏感信息。

通过掌握这些基本概念和操作，你将能够高效地使用 Supabase 构建现代应用程序。随着经验的积累，可以探索更高级的功能，如自定义函数、触发器等。

# 项目初始化

创建 Next.js 项目
在终端中运行以下命令来创建一个新的 Next.js 应用：
```
npx create-next-app nextjs-supabase
```
这将创建一个名为 nextjs-supabase 的文件夹，并在其中包含 Next.js 模板。
安装 Supabase 客户端
进入项目目录后，安装 Supabase 客户端库：
```
cd nextjs-supabase
npm install @supabase/supabase-js
```
或者使用 Yarn：
```
yarn add @supabase/supabase-js
```

# 配置 Supabase

创建 Supabase 项目
登录 Supabase (opens new window) 并创建一个新项目。记下你的 项目 URL 和 Anon Key，这两个值在设置中可以找到。
设置环境变量
在项目根目录下创建一个 .env.local 文件，并添加以下内容：
```
NEXT_PUBLIC_SUPABASE_URL=你的_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=你的_anon_key
```

初始化 Supabase 客户端
在项目中创建一个 supabase.js 文件，内容如下：

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

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);

# 构建应用逻辑

用户认证
在 pages/_app.js 中设置用户认证逻辑：

import { useEffect, useState } from 'react';
import { supabase } from '../supabase'; // 导入刚刚创建的 supabase 实例

function MyApp({ Component, pageProps }) {
    const [session, setSession] = useState(null);

    useEffect(() => {
        setSession(supabase.auth.session());
        const { data: authListener } = supabase.auth.onAuthStateChange((_, session) => {
            setSession(session);
        });
        return () => {
            authListener?.unsubscribe();
        };
    }, []);

    return <Component {...pageProps} session={session} />;
}

export default MyApp;

创建用户注册和登录页面
创建一个简单的登录组件，例如 pages/login.js，并使用 Supabase 的身份验证 API 进行用户注册和登录：

import { useState } from 'react';
import { supabase } from '../supabase';

const LoginPage = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleLogin = async () => {
        const { user, error } = await supabase.auth.signIn({ email, password });
        if (error) console.error('Login error:', error.message);
        else console.log('User logged in:', user);
    };

    return (
        <div>
            <input type="email" onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
            <input type="password" onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
            <button onClick={handleLogin}>Login</button>
        </div>
    );
};

export default LoginPage;

# 与数据库交互

创建数据库表
在 Supabase 仪表板中，使用 SQL 编辑器创建所需的表，例如用户锻炼记录表：

CREATE TABLE workouts (
    id bigint generated by default as identity primary key,
    user_id uuid references auth.users not null,
    title text,
    loads text,
    reps text,
    inserted_at timestamp with time zone default timezone('utc'::text, now()) not null
);

获取和操作数据
在需要的页面中，例如 pages/workouts.js，可以使用 Supabase 客户端来获取和操作数据：

import { useEffect, useState } from 'react';
import { supabase } from '../supabase';

const WorkoutsPage = () => {
    const [workouts, setWorkouts] = useState([]);

    useEffect(() => {
        const fetchWorkouts = async () => {
            const { data } = await supabase.from('workouts').select('*');
            setWorkouts(data);
        };
        fetchWorkouts();
    }, []);

    return (
        <div>
            <h1>Your Workouts</h1>
            <ul>
                {workouts.map(workout => (
                    <li key={workout.id}>{workout.title}</li>
                ))}
            </ul>
        </div>
    );
};

export default WorkoutsPage;

# 部署应用

部署到 Vercel
将你的代码推送到 GitHub，然后使用 Vercel 部署你的 Next.js 应用。Vercel 会自动检测到你使用的是 Next.js，并为你配置好所有必要的设置。

通过以上步骤，你应该能够成功构建一个基于 Next.js 和 Supabase 的全栈应用程序。随着你对这两个技术栈的深入了解，可以逐渐添加更多功能，如实时数据更新、文件存储等。

# ref

[1] https://juejin.cn/post/7159767366811779085
[2] https://docs.memfiredb.com/docs/app/development_guide/auth/auth-helpers/nextjs/
[3] https://juejin.cn/post/7112701321954164744
[4] https://cloud.tencent.com/developer/article/2435392
[5] https://blog.csdn.net/weixin_47967031/article/details/127319358
[6] https://www.freecodecamp.org/chinese/news/the-complete-guide-to-full-stack-development-with-supabas/

#tutorial #next.js #supabase