大家好，我是 viewer,最近在工作中学习和使用 Next.js 有一段时间了，为了更加深入的学习 Next.js 的一些高级用法，以及提高自己的全栈技术能力，我决定开设一个专栏，来记录我从 0 到 1 实现一个开源的 Next.js 全栈项目的历程。

我将通过本项目一步步实现一个口琴学习、练习的网站，并部署在 vercel 上。本项目将涉及到的技术栈包括：

框架：Next.js 14.x
类型：TypeScript
样式：Tailwindcss
依赖管理：pnpm
本地开发：bun
数据库：Supabase
部署：Vercel

如果你对此项目感兴趣，欢迎关注我，一起学习和交流。我将在今后定期更新项目的进展，以及一些学习实践的心得。

废话不多说，我们直接开始项目的搭建。

创建项目模板

因为这是一个全栈项目，我选择了使用supabase作为数据库方案。所以我需要一个包含了 supabase 的 Next.js 项目模板。

具体流程参考Use Supabase with Next.js

主要是以下 5 个步骤：

创建一个 supabase project，用 github 账号登录注册 supabase 的账号，然后进入控制台创建一个数据库项目，并使用以下 sql 语句创建测试表和新增数据：

 -- Create the table
 create table notes (
   id serial primary key,
   title text
 );

 -- Insert some sample data
 insert into notes (title)
 values
   ('Today I created a Supabase project.'),
   ('I added some data and queried it from Next.js.'),
   ('It was awesome!');

在合适本地文件目录下执行以下命令，创建一个包含了 supabase 的 Next.js 项目模板：

npx create-next-app -e with-supabase

声明 supabase 的环境变量

把项目里的.env.local.example文件重命名为.env.local，并填入你的 supabase 项目的环境变量。

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

4. 在 app 目录下新建测试页面：notes

// app/notes/page.tsx
import { createClient } from "@/utils/supabase/server";
import { cookies } from "next/headers";

export default async function Notes() {
  const cookieStore = cookies();
  const supabase = createClient(cookieStore);
  const { data: notes } = await supabase.from("notes").select();

  return <pre>{JSON.stringify(notes, null, 2)}</pre>;
}

本地启动服务，这里我使用 bun 进行本地开发，所以执行以下命令：

bun i&&bun dev

然后访问 http://localhost:3000/notes 就能看到数据库里的数据了。

项目部署

在 github 上创建一个新的仓库，然后把本地的代码推送到 github 上,因为我习惯使用 master 作为主分支，所以，我没有对主分支进行重命名。

推送完代码后，我们就可以在 vercel 上部署我们的项目了。

在 Vercel 主页上点击 Add New Project 按钮，然后在Import Git Repository里，选择你的 github 仓库点击import，然后进入项目配置的页面。

这里除了环境变量，其他不需要做任何修改，环境变量这里，需要我们把本地的.env.local文件里的环境变量填入到这里，或者把 .env.local改名为 .env 文件，这样我们本地和线上共用同一个数据库环境。如果以后有生产环境的专用数据库，为避免在开源代码中暴露可以加在这个地方来配置。

最后，直接点击Deploy按钮，然后等待项目部署完成。

项目部署完成后，就可以通过 vercel 提供的域名访问我们的项目了。

我们访问 https://harmonica-home.vercel.app/notes 可以看到和本地一样的数据库数据。

至此，我们的项目模板已经搭建完成了，接下来我们就可以开始开发我们的项目了。

Nextjs全栈实战（一）：初始化项目

创建项目模板

项目部署