Next.js
本次使用的next项目的版本为
14.2.1, 使用的全新路由App Router交互 前端路由next项目自动化路由，只需在app下新建文件夹，然后文件夹下新建page.tsx或者page.jsx官网地址：Next.js v14.2.1 文档
next.js专门为构建高效、动态的服务器端渲染（SSR）或静态生成（SSG）的 React 应用程序而设计- Next.js 是一个用于构建全栈 Web 应用程序的 React 框架。您可以使用 React 组件来构建用户界面，并Next.js其他功能和优化
- 在后台，Next.js 还抽象并自动配置 React 所需的工具，例如捆绑、编译等。这使您可以专注于构建应用程序，而不是花时间进行配置
- 无论您是个人开发人员还是大型团队的一员，Next.js 都可以帮助您构建交互式、动态且快速的 React 应用程序
- 使用官方脚手架
create-next-app创建一个项目
node版本需要
18.17及以上，运行下面命令，会提示输入项目名称，选择是否TS...等
npx create-next-app@latest
- 运行项目、查看
http://localhost:3000
npm run dev
- 编辑（或）文件并保存它以在浏览器中查看更新的结果
app/page.tsx或pages/index.tsx
Prisma
Prisma是一个现代的开源 ORM（对象关系映射）工具和数据库访问引擎，专为TypeScript和JavaScript开发者设计，用于简化与数据库的交互 对于前端不会sql语句的非常友好 (尤其是对于笔者这种不会sql的，简直不要太舒服) Prisma Documentation
- 在
next.js项目中安装prisma
npm install prisma --save-dev
- 使用
Prisma CLI的命令设置Prisma ORM：init
这将创建一个包含 Prisma 架构文件的新目录，并将 mysql 配置为数据库。
npx prisma init --datasource-provider mysql
- 修改
env文件，改成自己数据库账号密码以及地址
DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"
- 在
Prisma架构中对数据表结构进行建模
在
prisma目录下的schema.prisma文件添加模型（模型和数据库结构一致）
model Category {
id Int @id @default(autoincrement())
tagName String
cTime DateTime?
uTime DateTime?
disabled Int?
@@map("category") // 表名---使用 @map() 重新映射为了下划线命名，使用时候只需要 category 即可
}
- 保存并运行
schema.prisma(这个文件夹有更新都需要重新运行一遍这个命令)
npx prisma generate
next项目根目录下创建pages\api文件夹里面新建一个category.ts会自动生成一个/api/category接口
import { PrismaClient } from '@prisma/client';
import { NextApiRequest, NextApiResponse } from 'next';
const prisma = new PrismaClient();
export default async function fetchSomeData(req: NextApiRequest, res: NextApiResponse) {
const data = await prisma.category.findMany()
res.status(200).json({ code: 200, data })
}
- 浏览器访问一下
http://localhost:3000/api/category数据库对应的数据就来了
以上就是
next和prisma简单的入门
