Next.js + Vercel + Prisma 搭建全栈 TodoList：简单高效，性能爆棚

前端

2023-07-25 19:57:25

使用 Next.js、Vercel 和 Prisma 构建全栈 TodoList

构建高性能且易于维护的 Web 应用程序

全栈 Web 应用程序开发需要掌握各种技术和工具。本文将介绍如何使用 Next.js、Vercel 和 Prisma 来构建一个功能齐全的 TodoList 应用程序，以展示这些技术如何协同工作，以提高开发效率和应用程序性能。

Next.js：React 框架

Next.js 是一个基于 React 的框架，它简化了全栈 Web 应用程序的开发。它提供开箱即用的特性，如服务器端渲染 (SSR) 和静态站点生成 (SSG)，这些特性可以提升 Web 应用程序的性能和用户体验。

Vercel：云平台

Vercel 是一个云平台，专门用于 Next.js 应用的部署和托管。它提供了一个简单的部署过程，并提供了丰富的功能，如自动构建、自动部署、CDN 加速和 SSL 证书，从而简化了应用程序的运维。

Prisma：数据库工具

Prisma 是一个数据库工具，它简化了与数据库的交互。它提供了一个对象关系映射 (ORM)，使开发人员可以轻松地操作数据库，而无需编写繁琐的 SQL 查询。

构建 TodoList 应用程序

接下来，我们将逐步指导您构建一个 TodoList 应用程序，它将使用 Next.js、Vercel 和 Prisma。

1. 安装依赖

首先，使用以下命令创建并初始化一个新的 Next.js 应用：

npx create-next-app@latest --typescript
cd todo-list
npm install --save next-themes @prisma/client

2. 创建数据库

然后，初始化一个新的 Prisma 数据库：

npx prisma init

3. 定义数据模型

在 schema.prisma 文件中，定义 Todo 数据模型：

model Todo {
  id        Int     @id @default(autoincrement())
  title     String  @default("")
  completed Boolean @default(false)
}

4. 生成 Prisma Client

生成 Prisma Client，它将提供用于与数据库交互的 TypeScript 类型：

npx prisma generate

5. 编写 API 路由

在 pages/api/todos.js 中，编写一个 API 路由，用于获取所有 Todo：

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

export default async function handler(req, res) {
  const todos = await prisma.todo.findMany()
  res.json(todos)
}

6. 编写 UI 组件

在 components/TodoItem.js 中，编写一个 TodoItem 组件：

import { useState } from 'react'

export default function TodoItem({ todo }) {
  const [completed, setCompleted] = useState(todo.completed)

  const handleToggleCompleted = async () => {
    const updatedTodo = await prisma.todo.update({
      where: { id: todo.id },
      data: { completed: !completed }
    })
    setCompleted(updatedTodo.completed)
  }

  return (
    <li>
      <input type="checkbox" checked={completed} onChange={handleToggleCompleted} />
      <span>{todo.title}</span>
    </li>
  )
}

在 pages/index.js 中，编写主页组件：

import TodoItem from '../components/TodoItem'

export default function Home({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <TodoItem key={todo.id} todo={todo} />
      ))}
    </ul>
  )
}

export async function getServerSideProps() {
  const prisma = new PrismaClient()
  const todos = await prisma.todo.findMany()

  return {
    props: {
      todos
    }
  }
}