快速入门: Next.js

第一步：在 MemFire Cloud 仪表板中创建一个新应用。#

应用准备就绪后，进入应用，在左侧菜单->表编辑器选择 SQL 编辑器在 MemFire Cloud 数据库中创建一个表。使用以下 SQL 语句创建包含一些示例数据的国家/地区表。

  -- Create the table
  CREATE TABLE countries (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255) NOT NULL
  );
  -- Insert some sample data into the table
  INSERT INTO countries (name) VALUES ('United States');
  INSERT INTO countries (name) VALUES ('Canada');
  INSERT INTO countries (name) VALUES ('Mexico');

第二步：创建 Next.js 应用#

使用 npx 模板创建 Next.js 应用。

npx create-next-app my-next-app

第三步：安装 Supabase 客户端库#

最快的入门方法是使用 supabase-js 客户端库，它提供了一些简便的API，用于在 Next.js 应用程序中使用 Supabase。 导航到 Next.js 应用程序并安装 supabase-js 。

cd my-app && npm install @supabase/supabase-js

## 第四步： 声明 Supabase 环境变量

在根目录创建名为 .env.local 并使用项目的 URL 和 Anon Key 进行填充。

```bash
  NEXT_PUBLIC_SUPABASE_URL=your-project-url
  NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

第五步：从 Next.js 查询 Supabase 数据#

在 app/notes/page.tsx 创建一个新文件并填充以下内容。 这将从 Supabase 中的注释表中选择所有行并将它们呈现在页面上。

1   import { useEffect, useState } from "react";
2   import { createClient } from "@supabase/supabase-js";
3
4  export default async function Notes() {
5    const [countries, setCountries] = useState([]);
6
7    useEffect(() => {
8      getCountries();
9    }, []);
10
11    async function getCountries() {
12      const { data } = await supabase.from("countries").select();
13      setCountries(data);
14    }
15
16    return <ul>
17        {countries.map((country) => (
18          <li key={country.name}>{country.name}</li>
19        ))}
20      </ul>
21  }

第六步：启动应用程序

运行开发服务器，在浏览器中访问 http://localhost:3000/notes，您应该会看到笔记列表。

npm run dev