开始一个 Next.js 项目

从 Vercel 网页端开始

从 https://vercel.com/new 开始。

选择 Next.js Boilerplate 项目，这是一个干净的 Next.js + React 技术栈的项目：

关联 Github 并自动创建项目。

从 V0 开始（推荐）

V0 是 Vercel 推出的 AI UI 生成平台，优势是和 Vercel 高度集成。

在 V0 中，仍然可以将项目推送到 Github 进行版本管理。

持续开发迭代

使用 Github 将项目克隆到本地

推荐使用 Github GUI 客户端，将项目 Clone 到本地文件夹：

工具选择：V0 vs Cursor

截止 2025 年 6 月 12，我个人的开发体验来看，

• V0 更适合构建简单的登录页，V0 的审美、动画和流畅性是优势。
• V0 的 Design 模式，非常适合针对性调整细节。
• 对于较为复杂的 App 应用，特别是涉及到后端开发的应用，仍然推荐在 Cursor 中进行开发。

在 Cursor 中开发

在 Cursor 中打开项目。

在 Terminal 中运行 vercel 命令，这将自动 Link 到 Vercel 项目：

连接后，如果直接使用 vercel dev 运行开发环境，可能会出现以下错误。

使用 npm install 命令，从 package.json 安装依赖。

框架技术栈选择

开发语言：TypeScript

框架：Next.js（React 扩展）

动画：Motion （原 Framer Motion，现已独立）

UI 样式：Tailwind CSS、Tailwind UI

字体：

颜色：

托管文件

现在我们希望提供一个应用安装包下载链接，因此需要对文件进行托管。

GitHub Releases

GitHub Releases 是一个很好的选择，并且可以构建版本化的发布流程，但对中国客户不够有好 —— 由于网络问题，可能无法下载。

Vercel 自托管

只需要将 .dmg 文件放到项目的 public/ 目录中，Vercel 就会自动托管它并公开提供下载地址。

对下载数据进行分析统计

Vercel Blob

Vercel Blob 是一种文件存储服务，特别适合 Vercel 应用中处理图片、音频、视频、安装包等文件。

支持你在前端或 API 路由中上传、读取和管理文件，并自动通过 CDN 分发。

在 Vercel Web 页面上传文件：

连接 Project

在 Storage -> Blob 中连接 Project，以便 V0 能访问它：

在 V0 中，能够主动连接 Blob，并引导我们填写必要的环境变量：