使用 Next.js、Clerk 和 TailwindCSS 构建 YouTube Live 克隆 - 第一部分

Source: Dev.to

有没有想过直播平台是如何把实时视频传输给成千上万的观众的？
在这篇两部分的系列文章中，你将学习如何使用 Next.js、TailwindCSS 和 Stream 构建一个 YouTube Live 克隆版。我们会使用 TailwindCSS 搭建 UI，使用 Clerk 完成身份验证，并用 Prisma 对应用数据进行建模和持久化。随后我们会集成 Stream 视频和音频 SDK 实现直播功能，并使用 Stream Chat SDK 为每个直播添加实时聊天。完成后，你将拥有一个具备 YouTube Live 核心功能的可用应用。

在第一部分中，我们将搭建项目、添加身份验证并构建首页。你可以查看实时演示并在 GitHub 上获取完整源码。

前置条件

• 基础的 React 知识。
• 已安装 Node.js 和 npm。
• 熟悉 TypeScript、Next.js 和 TailwindCSS。

搭建 Next.js 项目

# Clone the repository
git clone https://github.com/TropicolX/youtube-live-clone.git

# Navigate into the project directory
cd youtube-live-clone

# Check out the starter branch
git checkout starter

# Install the dependencies
npm install

配置数据库

我们将在开发阶段使用 Prisma 搭配 SQLite。

npm install prisma@6.19.0 --save-dev
npm install @prisma/client@6.19.0 sqlite3

初始化 Prisma：

npx prisma init

编辑 prisma/schema.prisma：

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

generator client {
  provider = "prisma-client-js"
}

model Subscription {
  subscriberId String
  channelId    String
  createdAt    DateTime @default(now())
  @@id([subscriberId, channelId])
}

enum ReactionType {
  LIKE
  DISLIKE
}

model Reaction {
  userId        String
  livestreamId  String
  type          ReactionType
  createdAt     DateTime @default(now())
  @@id([userId, livestreamId])            // one reaction per user per livestream
  @@index([livestreamId, type])           // fast counts per type
}

配置数据库连接

在 .env 中添加：

DATABASE_URL=file:./dev.db

运行迁移并生成客户端：

npx prisma migrate dev --name init
npx prisma generate

创建 lib/prisma.ts：

import { PrismaClient } from '@prisma/client';

let prisma: PrismaClient;

if (process.env.NODE_ENV === 'production') {
  prisma = new PrismaClient();
} else {
  // @ts-expect-error global.prisma is used in development
  if (!global.prisma) {
    // @ts-expect-error global.prisma is used in development
    global.prisma = new PrismaClient();
  }
  // @ts-expect-error global.prisma is used in development
  prisma = global.prisma;
}

export default prisma;

使用 Clerk 进行用户身份验证

什么是 Clerk？

Clerk 提供开箱即用的用户管理、身份验证和个人资料处理功能。

创建 Clerk 账户

1. 在 Clerk 官网注册。
2. 在仪表盘中点击 Create application。
3. 将其命名为 “Youtube Live Clone”。
4. 启用 “Email”、 “Username” 与 “Google” 登录方式。
5. 保存应用并记录 Publishable Key 与 Secret Key。

配置必填用户字段

1. 前往 Configure 选项卡 → User model。
2. 启用 “Require first and last name”。
3. 保存更改。

在项目中安装 Clerk

npm install @clerk/nextjs

创建 .env.local：

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

将占位符替换为你在 Clerk 应用中获得的密钥。

更新 app/layout.tsx（或 app/layout.tsx，如果使用新 App Router）：

import type { Metadata } from 'next';
import { ClerkProvider } from '@clerk/nextjs';
import './globals.css';

export const metadata: Metadata = {
  title: 'YouTube Live clone',
  description: 'A YouTube Live clone built with Next.js and Stream.',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <ClerkProvider>
      {children}
    </ClerkProvider>
  );
}

创建注册与登录页面

在 app/sign-up/[[...sign-up]]/page.tsx 中创建注册页面：

'use client';
import { SignUp } from '@clerk/nextjs';

export default function Page() {
  return (
    <SignUp />
  );
}

在 app/sign-in/[[...sign-in]]/page.tsx 中创建登录页面（结构相同，只是使用 SignIn）：

'use client';
import { SignIn } from '@clerk/nextjs';

export default function Page() {
  return (
    <SignIn />
  );
}

现在 Clerk 已经在整个应用中处理身份验证的 UI 与逻辑。