Skip to main content

使用 Next.js、Prisma 和 Vibe Code 构建 Linktree 克隆 SaaS 店员

45 min

介绍​

¥Introduction

在本 Vibe 编码教程中，你将使用 AI 辅助从零开始构建一个完整的 Linktree 克隆 SaaS 应用。本指南将教你如何利用 AI 工具快速开发全栈应用：

¥In this comprehensive vibe coding tutorial, you'll build a complete Linktree clone SaaS application from scratch using AI assistance. This guide teaches you how to leverage AI tools to rapidly develop a full-stack application with:

  • Next.js — 用于生产环境的 React 框架

    ¥Next.js — React framework for production

  • Prisma ORM — 类型安全的数据库访问

    ¥Prisma ORM — Type-safe database access

  • Prisma Postgres — 无服务器 PostgreSQL 数据库

    ¥Prisma Postgres — Serverless PostgreSQL database

  • Clerk — 身份验证和用户管理

    ¥Clerk — Authentication and user management

在本教程结束时，你将拥有一个可运行的 SaaS 应用，用户可以在其中注册、创建个人资料并管理个人链接页面 - 所有这些都是借助 AI 辅助开发构建的。

¥By the end of this tutorial, you'll have a working SaaS application where users can sign up, create their profile, and manage their personal link page — all built with AI-assisted development.

什么是 Vibe Coding？

Vibe 编码是一种开发方法，你可以在其中与 AI 助手协作构建应用。你只需描述要构建的内容，AI 即可帮助你生成代码，同时你可以指导方向并做出架构决策。

¥Vibe coding is a development approach where you collaborate with AI assistants to build applications. You describe what you want to build, and the AI helps generate the code while you guide the direction and make architectural decisions.

先决条件​

¥Prerequisites

开始本教程前，请确保你已完成以下操作：

¥Before starting this tutorial, make sure you have:

推荐的 AI 模型

为获得最佳效果，我们建议使用最新的 AI 模型，例如（最低版本）Claude Sonnet 4、Gemini 2.5 Pro 或 GPT-4o。这些模型能够提供更高的代码生成精度，并理解复杂的架构模式。

¥For best results, we recommend using the latest AI models such as (minimum) Claude Sonnet 4, Gemini 2.5 Pro, or GPT-4o. These models provide better code generation accuracy and understand complex architectural patterns.

1. 设置项目​

¥ Set Up Your Project

首先，创建一个新的 Next.js 应用：

¥Let's start by creating a new Next.js application:

npx create-next-app@latest app-name

设置完成后，你需要将 Prisma 和 Prisma Postgres 添加到你的项目中。我们已准备了一份详细的提示，可帮助你完成所有设置。

¥Once the setup is complete, you'll need to add Prisma and Prisma Postgres to your project. We've prepared a detailed prompt that handles the complete setup for you.

👉 在此处查找设置提示：Next.js + Prisma Prompt（Next.js + Prisma 提示）

¥👉 Find the setup prompt here: Next.js + Prisma Prompt

如何使用：

¥How to use it:

  1. 在项目根目录中创建一个名为 prompt.md 的新文件

    ¥Create a new file called prompt.md at the root of your project

  2. 将提示内容复制并粘贴到此文件中

    ¥Copy and paste the prompt content into this file

  3. 请你的 AI 助手按照此文件中的说明进行操作

    ¥Ask your AI assistant to follow the instructions in this file

AI 将自动设置 Prisma ORM、创建数据库连接并配置所有内容。

¥The AI will set up Prisma ORM, create your database connection, and configure everything automatically.

快速检查​

¥Quick Check

验证一切是否正常运行：

¥Let's verify everything is working correctly:

  1. 启动你的开发服务器：

    ¥Start your development server:

    npm run dev

  2. 打开 Prisma Studio 以查看你的种子数据：

    ¥Open Prisma Studio to view your seed data:

    npm run db:studio

如果两条命令都运行正常，并且你可以在 Prisma Studio 中看到示例数据，那么就可以继续了！

¥If both commands run without errors and you can see sample data in Prisma Studio, you're ready to continue!

最佳实践：尽早提交并频繁提交

在本教程中，我们将定期提交更改。这使得跟踪进度并在出现问题时回滚变得容易。

¥Throughout this tutorial, we'll commit our changes regularly. This makes it easy to track progress and roll back if something goes wrong.

首先将你的项目链接到 GitHub：

¥Start by linking your project to GitHub:

git init
git add .
git commit -m "Initial setup: Next.js app with Prisma"

2. 使用 Clerk 设置身份验证​

¥ Set Up Authentication with Clerk

现在，让我们使用 Clerk 添加用户身份验证，它提供了一个开箱即用的完整身份验证解决方案。

¥Now let's add user authentication using Clerk, which provides a complete authentication solution out of the box.

操作步骤：

¥Steps to follow:

  1. 前往 Clerk 并创建一个账户（如果你还没有账户）

    ¥Go to Clerk and create an account (if you don't have one)

  2. 在 Clerk 控制面板中创建一个新应用

    ¥Create a new application in your Clerk dashboard

  3. 按照 Clerk 的官方快速入门指南将其集成到你的 Next.js 应用中：

    ¥Follow Clerk's official quickstart guide to integrate it with your Next.js app:

👉 Clerk Next.js 快速入门：clerk.com/docs/nextjs/getting-started/quickstart

¥👉 Clerk Next.js Quickstart: clerk.com/docs/nextjs/getting-started/quickstart

本指南将引导你完成 SDK 的安装、添加环境变量以及使用 ClerkProvider 封装你的应用。

¥The guide will walk you through installing the SDK, adding environment variables, and wrapping your app with the ClerkProvider.

完成后，提交更改：

¥Once complete, commit your changes:

git add .
git commit -m "Add Clerk authentication setup"

3. 更新数据库架构​

¥ Update Your Database Schema

由于我们正在构建 Linktree 克隆版本，因此需要更新数据库架构以支持我们特定的数据模型。这包括：

¥Since we're building a Linktree clone, we need to update the database schema to support our specific data model. This includes:

  • 一个带有唯一 username 的 User 模型（用于类似 /username 的公共个人资料 URL）

    ¥A User model with a unique username (for public profile URLs like /username)

  • 一个用于存储每个用户链接的 Link 模型

    ¥A Link model to store each user's links

将 prisma/schema.prisma 文件的内容替换为以下内容：

¥Replace the contents of your prisma/schema.prisma file with the following:

prisma/schema.prisma
generator client {
  provider = "prisma-client"
  output   = "../app/generated/prisma"
}

datasource db {
  provider = "postgresql"
}

// Example User model for testing
model User {
  id        Int      @id @default(autoincrement())
  email     String   @unique
  username  String   @unique // Important for the public profile URL
  clerkId   String   @unique // Links to Clerk Auth
  name      String?
  links     Link[]
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

model Link {
  id        Int      @id @default(autoincrement())
  title     String
  url       String
  userId    Int
  user      User     @relation(fields: [userId], references: [id])
  createdAt DateTime @default(now())
}

由于我们要更改架构结构，因此需要重置数据库。现有的种子数据仅用于测试目的，因此可以安全地删除并重新创建：

¥Since we're changing the schema structure, we need to reset the database. The existing seed data was just for testing purposes, so it's safe to drop and recreate:

npx prisma db push --force-reset

这个命令：

¥This command:

  • 删除现有数据库表

    ¥Drops the existing database tables

  • 根据你更新的架构创建新表。

    ¥Creates new tables based on your updated schema

谨慎使用

--force-reset 标志会删除所有现有数据。这在原型设计阶段没问题，但切勿在生产数据库上使用它！数据库模式稳定后，切换到 prisma migrate dev 以进行正确的迁移跟踪。

¥The --force-reset flag deletes all existing data. This is fine during prototyping, but never use it on a production database! Once your schema is stable, switch to prisma migrate dev for proper migration tracking.

快速检查​

¥Quick Check

打开 Prisma Studio 以验证新模式是否已应用：

¥Open Prisma Studio to verify the new schema is applied:

npm run db:studio

你应该看到更新后的 User 和 Link 表（它们将为空，这是预期行为）。

¥You should see the updated User and Link tables (they'll be empty, which is expected).

提交你的更改：

¥Commit your changes:

git add .
git commit -m "Update schema for Linktree clone"

4. 将 Clerk 用户连接到你的数据库​

¥ Connect Clerk Users to Your Database

挑战来了：当用户使用 Clerk 登录时，他们的信息存在于 Clerk 的系统中，但不存在于你的数据库中。我们需要解决这个问题。

¥Here's the challenge: when a user signs in with Clerk, they exist in Clerk's system but not in your database. We need to bridge this gap.

我们的方法：创建一个 "声明用户名" 流程，让用户在首次登录后选择其唯一的用户名（例如，yourapp.com/johndoe）。

¥Our approach: create a "Claim Username" flow where users pick their unique username (e.g., yourapp.com/johndoe) after signing in for the first time.

首先使用 ASK 模式

在使用 AI 助手时，我们建议默认使用“询问”模式，以便在应用更改之前查看建议。只有在你对建议的代码感到满意后，才切换到 AGENT 模式。

¥When working with AI assistants, we recommend using ASK mode by default to review suggested changes before applying them. Only switch to AGENT mode once you're comfortable with the proposed code.

提示​

¥The Prompt

将以下提示复制并粘贴到你的 AI 助手：

¥Copy and paste the following prompt into your AI assistant:

Connect Clerk authentication to your Prisma database with a "Claim Username" flow.

**Goal:**

When a user signs in via Clerk, they don't automatically exist in YOUR database. Create a flow where:

1. Logged out → Show landing page with "Sign In" button
2. Logged in but no DB profile → Show "Claim Username" form
3. Has DB profile → Show dashboard

**User Model (already in schema):**

model User {
  id        Int      @id @default(autoincrement())
  email     String   @unique
  username  String   @unique
  clerkId   String   @unique
  name      String?
  links     Link[]
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

**Files to create/update:**

1. `app/actions.ts` - Server Action with `claimUsername(formData)`
2. `app/page.tsx` - Three-state UI (logged out / claim username / dashboard)
3. `app/api/users/route.ts` - Update POST to accept `clerkId`, `email`, `username`, `name`

**Requirements:**

- Use `'use server'` directive in `app/actions.ts`
- Use `currentUser()` from `@clerk/nextjs/server` to get auth user
- Store `clerkId`, `email`, `username`, and `name` in User model
- Use `redirect("/")` after successful profile creation
- Handle username uniqueness (Prisma will throw if duplicate)

**Pattern:**

1. Server Action receives FormData, validates username (min 3 chars, alphanumeric + underscore)
2. Creates User in Prisma with Clerk's `user.id` as `clerkId`
3. Page.tsx checks: `currentUser()` → then `prisma.user.findUnique({ where: { clerkId } })`
4. Render different UI based on auth state and DB state

**Keep it simple:**

- No middleware file needed
- No webhook sync (user creates profile manually)
- Basic validation (username length >= 3)
- Errors just throw (no fancy error UI for MVP)

AI 生成代码后，你可能会看到 TypeScript 错误。这是因为 Prisma 客户端需要重新生成以反映模式更改：

¥After the AI generates the code, you may see TypeScript errors. This is because the Prisma Client needs to be regenerated to reflect the schema changes:

npx prisma generate

快速检查​

¥Quick Check

测试完整流程：

¥Test the complete flow:

  1. 停止并重启你的开发服务器

    ¥Stop your dev server and restart it

  2. 在浏览器中打开你的应用

    ¥Open your app in the browser

  3. 通过 Clerk 注册新用户

    ¥Sign up as a new user through Clerk

  4. 你应该看到 "声明用户名" 表单

    ¥You should see the "Claim Username" form

  5. 输入用户名并提交

    ¥Enter a username and submit

  6. 验证用户是否显示在 Prisma Studio (npm run db:studio) 中

    ¥Verify the user appears in Prisma Studio (npm run db:studio)

如果一切正常，请提交你的更改！

¥If everything works, commit your changes!

5. 升级 UI 设计​

¥ Upgrade the UI Design

让我们借鉴 Buy Me a Coffee 等平台，为我们的应用打造一个更精致、更友好的外观。

¥Let's give our app a more polished, friendly look inspired by platforms like Buy Me a Coffee.

👉 访问 Buy Me a Coffee 获取设计灵感

¥👉 Visit Buy Me a Coffee for design inspiration

将以下提示复制并粘贴到你的 AI 助手：

¥Copy and paste this prompt to your AI assistant:

Design a minimal, friendly UI inspired by Buy Me a Coffee.

**Theme:**
- Force light mode only (no dark mode switching)
- Clean white background (#FFFFFF)
- Black text (#000000) for headings
- Gray (#6B7280) for secondary text
- Bright yellow (#FFDD00) for CTA buttons
- Light gray (#F7F7F7) for cards/sections
- Subtle borders (#E5E5E5)

**Typography & Spacing:**
- Large, bold headlines (text-5xl or bigger)
- Generous whitespace and padding
- Rounded corners everywhere (rounded-full for buttons, rounded-xl for cards)

**Buttons:**
- Primary: Yellow background, black text, rounded-full, font-semibold
- Secondary: White background, border, rounded-full

**Overall feel:**
- Friendly, approachable, not corporate
- Minimal — only essential elements
- Mobile-first with good touch targets (py-4, px-8 on buttons)
- One unified canvas — background applies to the entire page (body), with white cards floating on top. No separate section backgrounds.

Use Tailwind CSS. Keep it simple.

快速检查​

¥Quick Check

AI 应用更改后：

¥After the AI applies the changes:

  1. 刷新你的应用并浏览所有页面

    ¥Refresh your app and browse through all pages

  2. 验证设计是否已更新，但功能是否未更改

    ¥Verify the design has updated but no functionality has changed

  3. 测试登录流程和用户名声明过程

    ¥Test the sign-in flow and username claim process

验证后，提交更改：

¥Once verified, commit the changes:

git add .
git commit -m "Update UI design"

6. 构建链接管理（添加和删除）​

¥ Build Link Management (Add & Delete)

现在，让我们添加核心功能：管理链接！用户应该能够从其仪表板添加新链接和删除现有链接。

¥Now let's add the core functionality: managing links! Users should be able to add new links and delete existing ones from their dashboard.

复制并粘贴以下提示：

¥Copy and paste this prompt:

Build a simple dashboard for managing links using Next.js App Router and Server Actions.

**Requirements:**
- Server Component page that fetches user data from database
- "Add Link" form with Title and URL inputs
- List of existing links with Delete button
- Use Server Actions (no API routes) for create/delete operations
- Use `revalidatePath("/")` after mutations to refresh the page

**Pattern:**
1. Create server actions in `actions.ts` with `'use server'` directive
2. Pass actions directly to form `action` prop
3. Keep page.tsx as a Server Component (no 'use client')
4. Use hidden inputs for IDs (e.g., `<input type="hidden" name="linkId" value={id} />`)

**Keep it simple:**
- No loading states
- No client components
- No confirmation dialogs
- Just forms + server actions + revalidation

This is the MVP pattern for CRUD with Next.js App Router.

快速检查​

¥Quick Check

测试链接管理：

¥Test the link management:

  1. 添加一个包含标题和 URL 的新链接

    ¥Add a new link with a title and URL

  2. 验证它是否显示在你的控制面板中

    ¥Verify it appears in your dashboard

  3. 删除链接

    ¥Delete the link

  4. 验证是否已移除

    ¥Verify it's removed

这两个操作都应该立即生效，无需页面导航。

¥Both operations should work instantly without page navigation.

7. 创建公共个人资料页面​

¥ Create Public Profile Pages

这是 Linktree 克隆的核心：任何人都可以通过 /username 访问的公开个人资料页面。

¥This is the heart of a Linktree clone: public profile pages that anyone can visit at /username.

复制并粘贴以下提示：

¥Copy and paste this prompt:

Build a public profile page at /[username] using Next.js App Router dynamic routes.

**Requirements:**
- Create `app/[username]/page.tsx` as a Server Component
- Fetch user + links from database by username (from URL params)
- Return 404 if user not found (use `notFound()` from next/navigation)
- Display: avatar (first letter), username, name, and list of links
- Links open in new tab with `target="_blank"`
- Add a small "Create your own" link at the bottom

**Pattern:**
1. Get params: `const { username } = await params`
2. Query database with `findUnique({ where: { username } })`
3. If no user: call `notFound()`
4. Render profile with links as clickable buttons

**Keep it simple:**
- No auth required (it's a public page)
- Pure Server Component (no 'use client')
- Basic styling with hover effects

This is the core "Linktree" feature — anyone can visit /username to see the links.

快速检查​

¥Quick Check

测试你的公开个人资料：

¥Test your public profile:

  1. 导航至 localhost:3000/your-username（替换为你的实际用户名）

    ¥Navigate to localhost:3000/your-username (replace with your actual username)

  2. 验证你的个人资料和链接是否显示正确

    ¥Verify your profile and links display correctly

  3. 点击链接并确认它在新标签页中打开

    ¥Click a link and confirm it opens in a new tab

8. 添加 "复制链接" 按钮​

¥ Add a "Copy Link" Button

让用户能够通过一键复制按钮轻松分享他们的个人资料 URL。

¥Make it easy for users to share their profile URL with a one-click copy button.

复制并粘贴以下提示：

¥Copy and paste this prompt:

**Requirements:**

- Create a Client Component (`'use client'`) for the button
- Use `navigator.clipboard.writeText(url)` to copy
- Show "Copied!" feedback for 2 seconds after clicking
- Use `useState` to toggle the button text

**Pattern:**

1. Create `app/components/copy-button.tsx` with 'use client'
2. Accept `url` as a prop
3. On click: copy to clipboard, set `copied` to true
4. Use `setTimeout` to reset after 2 seconds
5. Import and use in your Server Component page

**Keep it simple:**

- One small client component
- No toast libraries
- Just inline text feedback ("Copy link" → "Copied!")

快速检查​

¥Quick Check

  1. 在仪表板上找到 "复制链接" 按钮

    ¥Find the "Copy link" button on your dashboard

  2. 点击链接并验证它显示的是 "已复制！"

    ¥Click it and verify it shows "Copied!"

  3. 粘贴到某个位置以确认 URL 已正确复制

    ¥Paste somewhere to confirm the URL was copied correctly

9. 创建自定义 404 页面​

¥ Create a Custom 404 Page

当用户访问不存在的用户名时，应显示友好的错误页面，而不是通用的 404 错误。

¥When someone visits a non-existent username, they should see a friendly error page instead of a generic 404.

复制并粘贴以下提示：

¥Copy and paste this prompt:

Create a custom 404 page for Next.js App Router.

**Requirements:**
- Create `app/not-found.tsx` (Server Component)
- Display: 404 heading, friendly message, "Go home" button
- Match your app's design (colors, fonts, spacing)

**Pattern:**
- Next.js automatically uses `not-found.tsx` when `notFound()` is called
- Or when a route doesn't exist
- No configuration needed — just create the file

**Keep it simple:**
- Static page, no data fetching
- One heading, one message, one link
- Same styling as rest of the app

快速检查​

¥Quick Check

访问一个随机 URL（例如 /this-user-does-not-exist）来测试 404 页面。你应该看到自定义的 404 页面，其中包含返回首页的链接。

¥Test the 404 page by visiting a random URL like /this-user-does-not-exist. You should see your custom 404 page with a link back to the homepage.

10 添加自定义背景​

¥. Add a Custom Background

让我们使用自定义背景图案，让应用更具视觉特色。

¥Let's make the app more visually distinctive with a custom background pattern.

首先，你可以选择：

¥First, either:

然后，将其保存为 background.svg 并放在 public/ 文件夹中。

¥Then, save it as background.svg in your public/ folder.

复制并粘贴以下提示：

¥Copy and paste this prompt:

Add a custom SVG background to my app.

**Requirements:**
- The svg file is in the `public/` folder (e.g., `public/background.svg`)
- Apply it as a fixed, full-cover background on the body

**Pattern:**
In `globals.css`, update the body:

```css
body {
  background: var(--background) url('/background.svg') center/cover no-repeat fixed;
  min-height: 100vh;
}
```

**Key properties:**
- `center/cover` — centers and scales to fill
- `no-repeat` — prevents tiling
- `fixed` — background stays in place when scrolling

Files in `public/` are served at the root URL, so `/background.svg` works.

快速检查​

¥Quick Check

  1. 刷新你的应用

    ¥Refresh your app

  2. 验证背景是否显示在所有页面（首页、控制面板、个人资料页面、404 页面）上

    ¥Verify the background appears on all pages (homepage, dashboard, profile pages, 404)

  3. 如果背景并非在所有地方都显示，请让你的 AI 修复此问题。

    ¥If the background doesn't appear everywhere, ask your AI to fix it

确认一切正常后，提交你的更改。

¥Commit your changes once it's working correctly.

11 添加 Glassmorphism 卡片容器​

¥. Add Glassmorphism Card Containers

通过添加半透明卡片容器（"float" 覆盖在背景之上）来创建视觉深度。

¥Create visual depth by adding semi-transparent card containers that "float" over the background.

复制并粘贴以下提示：

¥Copy and paste this prompt:

Add a reusable card container class to create visual separation from the background.

**Requirements:**

- Create a `.card` class in `globals.css`
- Apply glassmorphism: semi-transparent white + blur
- Use on all main content areas (landing, forms, dashboard, profile pages)

**Pattern:**
In `globals.css`, add:

```css
.card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
```

**Usage:**
Wrap content sections with `<div className="card">...</div>`

For public profile pages (/[username]):
Wrap the entire profile (avatar, name, username, and links list) in a single .card container
This creates a Linktree-style floating card effect
Footer/attribution links stay outside the card

Hero section:
Add a soft radial glow behind the content (large blurred white circle, blur-3xl, 50% opacity)
No visible container edges — just organic, fading brightness
Content floats freely over the glow

**Result:**

- Content "lifts" off the background
- Subtle blur creates depth
- Consistent UI across all pages

12 显示 Clerk 个人资料图片​

¥. Display Clerk Profile Images

如果用户使用 Google 或其他 OAuth 提供商登录，Clerk 会存储他们的个人资料照片。让我们在公共个人资料中展示它！

¥If users sign in with Google or another OAuth provider, Clerk stores their profile photo. Let's display it on public profiles!

复制并粘贴以下提示：

¥Copy and paste this prompt:

On the public profile page (`/[username]`), display the user's Clerk profile image (Google photo, etc.) instead of the initial letter avatar.

**Pattern:**

```typescript
// Fetch Clerk user to get profile image
const client = await clerkClient()
const clerkUser = await client.users.getUser(user.clerkId)
```

**Display:**
- Use a plain `<img>` tag (not Next.js Image component)
- If `clerkUser.imageUrl` exists, show the image
- Otherwise fallback to the yellow initial avatar

**Keep it simple:**
- No try/catch — let errors bubble up
- No next.config changes needed
- No database schema changes needed

快速检查​

¥Quick Check

访问你的公开个人资料页面，并确认显示的是你的个人头像（来自 Google、GitHub 等），而不是头像的首字母。

¥Visit your public profile page and verify your profile image (from Google, GitHub, etc.) is displayed instead of the initial letter avatar.

13 使用 Lucide 添加图标​

¥. Add Icons with Lucide

小图标可以显著提高 UI 的清晰度。让我们使用 Lucide React 添加一些功能。

¥Small icons can significantly improve UI clarity. Let's add some using Lucide React.

复制并粘贴以下提示：

¥Copy and paste this prompt:

Add Lucide React icons to improve the UI.

First install: npm install lucide-react

Add icons to these elements:
- View button: ExternalLink icon
- Delete button: Trash2 icon (replace text with icon)
- Empty links state: Link icon

Import icons from 'lucide-react' and use with size prop (e.g., size={18}).

Keep buttons minimal — only add icons where they improve clarity.

快速检查​

¥Quick Check

浏览你的应用并验证图标是否显示在以下位置：

¥Browse through your app and verify the icons appear on:

  • 查看/外部链接按钮

    ¥The view/external link buttons

  • 删除按钮

    ¥The delete buttons

  • 当不存在任何链接时，状态为空

    ¥The empty state when no links exist

14 部署到 Vercel​

¥. Deploy to Vercel

发布时间到！让我们将你的应用部署到 Vercel。

¥Time to ship! Let's deploy your app to Vercel.

重要步骤

请仔细按照以下步骤操作，以避免部署错误。

¥Follow these steps carefully to avoid deployment errors.

步骤 1：配置 Prisma 的生产环境​

¥Step 1: Configure Prisma for Production

添加 postinstall 脚本，以确保在部署期间生成 Prisma Client。

¥Add a postinstall script to ensure Prisma Client is generated during deployment.

将以下内容添加到 package.json 脚本部分：

¥Add this to your package.json scripts section:

package.json
{
  "scripts": {
    "postinstall": "prisma generate"
  }
}

📖 参考：部署到 Vercel - 构建配置

¥📖 Reference: Deploy to Vercel - Build Configuration

第 2 步：清理开发文件​

¥Step 2: Clean Up Development Files

如果 scripts/ 文件夹存在，则将其删除。此文件夹在初始设置期间自动生成，用于存储种子数据，在生产环境中不需要它。

¥Delete the scripts/ folder if it exists. This folder was auto-generated during initial setup for seed data, you don't need it in production.

步骤 3：部署到 Vercel​

¥Step 3: Deploy to Vercel

  1. 将你的代码推送到 GitHub（如果你尚未这样做）。

    ¥Push your code to GitHub (if you haven't already)

  2. 前往 vercel.com 并导入你的代码仓库

    ¥Go to vercel.com and import your repository

  3. 重要的：在 Vercel 的控制面板中添加所有环境变量：

    ¥Important: Add all your environment variables in Vercel's dashboard:

    • DATABASE_URL

    • NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY

    • CLERK_SECRET_KEY

步骤 4：更新应用 URL​

¥Step 4: Update the App URL

首次部署后：

¥After your first deployment:

  1. 从 Vercel 复制你的生产环境 URL（例如，https://your-app.vercel.app）

    ¥Copy your production URL from Vercel (e.g., https://your-app.vercel.app)

  2. 在 Vercel 中添加一个新的环境变量：

    ¥Add a new environment variable in Vercel:

    NEXT_PUBLIC_APP_URL=https://your-app.vercel.app

  3. 重新部署以应用更改

    ¥Redeploy to apply the change

别忘了这一步

如果你跳过设置 NEXT_PUBLIC_APP_URL，则诸如 "复制链接" 按钮之类的功能将复制 localhost URL，而不是你的生产环境 URL。

¥If you skip setting NEXT_PUBLIC_APP_URL, features like the "Copy Link" button will copy localhost URLs instead of your production URL.

最终检查​

¥Final Check

全面测试你已部署的应用：

¥Test your deployed app thoroughly:

  • 注册流程正常

    ¥Sign up flow works

  • 用户名认领功能正常

    ¥Username claiming works

  • 添加/删除链接功能正常

    ¥Adding/deleting links works

  • 公开个人资料页面加载正常。

    ¥Public profile pages load correctly

  • 复制链接将复制正确的生产环境 URL

    ¥Copy link copies the correct production URL

  • 对于不存在的用户名，显示 404 页面。

    ¥404 page displays for non-existent usernames

**恭喜！你的 Linktree 克隆已上线！🎉 **

¥Congratulations! Your Linktree clone is live! 🎉

资源​

¥Resources


Stay connected with Prisma

Continue your Prisma journey by connecting with our active community. Stay informed, get involved, and collaborate with other developers:

We genuinely value your involvement and look forward to having you as part of our community!