Supabase Next.js SaaS 模板项目启动和配置教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00315/article/details/148218861

Supabase Next.js SaaS 模板项目启动和配置教程

supabase-nextjs-template A production-ready SaaS template built with Next.js 15, Supabase, and Tailwind CSS. Includes authentication, user management, file storage, task management demos, and secure RLS policies. Easily customizable with pre-built themes and legal documents. Perfect for quickly launching your SaaS product! 🎉 项目地址: https://gitcode.com/gh_mirrors/su/supabase-nextjs-template

1. 项目的目录结构及介绍

Supabase Next.js SaaS 模板项目是一个基于 Next.js、Supabase 和 Tailwind CSS 的生产就绪的 SaaS 模板。以下是项目的目录结构及其组件的简要介绍：

supabase-nextjs-template/
├── .idea/                     # IntelliJ IDEA 项目文件
├── nextjs/                    # Next.js 应用程序目录
│   ├── pages/                 # Next.js 页面目录
│   ├── components/            # 可复用组件目录
│   ├── styles/                # 样式文件目录
│   ├── utils/                 # 工具函数目录
│   └── ...                    # 其他配置和脚本文件
├── supabase/                  # Supabase 配置和迁移文件
├── LICENSE                    # Apache-2.0 许可文件
├── README.md                  # 项目说明文件
└── ...                        # 其他可能存在的文件或目录

2. 项目的启动文件介绍

在项目的根目录中，有几个关键的启动文件：

package.json：定义了项目的依赖关系和启动脚本。例如，以下是一个启动开发服务器的脚本：

{
  "scripts": {
    "dev": "next dev"
  }
}

.env.template：包含环境变量的模板文件，用于配置 Supabase URL 和密钥。

3. 项目的配置文件介绍

项目中的配置文件主要用于设置 Supabase 和 Next.js 的环境变量：

supabase/config.toml：配置 Supabase 的相关设置，如项目 URL 和重定向 URL。例如：

[build]
  site_url = "http://localhost:3000"
  additional_redirect_urls = ["https://your-redirect-url.com"]

.env.local：本地的环境变量文件，用于存储 Supabase URL、Anon Key、Service Key 等敏感信息。例如：

NEXT_PUBLIC_SUPABASE_URL=https://api-url.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
PRIVATE_SUPABASE_SERVICE_KEY=your-service-key

启动项目之前，请确保你已经正确填充了所有必要的环境变量，并且已经链接了 Supabase 项目。

启动项目：

# 登录到 Supabase
npx supabase login

# 链接项目到 Supabase
npx supabase link

# 发送配置到服务器
npx supabase config push

# 执行迁移
npx supabase migrations up --linked

# 进入 nextjs 目录并安装依赖
cd nextjs && yarn

# 复制 .env.template 到 .env.local 并编辑
cp .env.template .env.local

# 启动开发服务器
yarn dev

之后，你可以通过浏览器访问 http://localhost:3000 来查看项目。

以上就是 Supabase Next.js SaaS 模板项目的启动和配置教程。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考