Next.js14快速上手
文章目录
- ***客户端***
- 什么是Next
- 项目在线地址
- 官方文档
- 项目创建
- 查看项目目录结构
- app属于根目录
- ***服务端***
- vercel
- 数据库
- prisma
客户端
什么是Next
Next.js 是一个用于构建全栈 Web 应用程序的 React 框架。您可以使用 React Components 来构建用户界面，并使用 Next.js 来实现附加功能和优化。
项目在线地址
点击查看效果
官方文档
1.Next文档
2.Next示例项目
项目创建
项目创建有两种方法
// 1，基础
npx create-next-app@latest
// 2.官网最新示例
npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm
安装时看到如下效果
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside asrc/directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack fornext dev? No / Yes
Would you like to customize the import alias (@/*by default)? No / Yes
What import alias would you like configured? @/*
安装完成后使用 npm run dev启动项目
查看项目目录结构
app属于根目录
在项目根目录下可以创建自己想要的文件夹，因为next是直接通过项目目录结构来访问里面的内容的。
在传统的前端中，需要自己手动定义路由，然后再去访问页面，而next不同，不需要自定义路由，只需要新建文件夹，然后使用文件夹的名称就可以在浏览器中直接访问该页面。
服务端
作为前端，最重要的应该是数据库部分，毕竟我们也不会经常去接触数据库等服务器部分的东西。
vercel
Vercel 是一个前端云平台，专门为开发者提供快速部署、托管以及持续集成服务，特别适合基于 JavaScript 和框架如
Next.js、React 等的应用程序。它的主要优势在于：
1.部署简便：通过连接 GitHub、GitLab 或 Bitbucket 仓库，代码更新后可以自动触发部署，无需手动设置复杂的服务器配置。
2.自动优化：Vercel 会自动优化前端资源，提供高效的性能，例如通过分片加载、边缘缓存和智能 CDN 来提升页面加载速度。
3.Next.js 的深度集成：作为 Next.js 的创建者，Vercel 提供了一流的支持，Next.js 的所有功能（如静态生成、服务端渲染、增量静态再生成等）都可以无缝使用。
4.全球 CDN：Vercel 拥有全球分布的内容分发网络（CDN），确保应用程序在全球范围内都能快速加载。
5.无服务器功能：Vercel 允许在不需要维护服务器的情况下创建 API 端点，提供“Serverless Functions”，适合一些轻量级的后端逻辑或计算。
5.团队协作：Vercel 支持团队协作，可以轻松邀请开发者共同开发、预览并部署应用。
数据库
Next官方推荐的是postgre
PostgreSQL（简称 Postgres）是一个功能强大、开源的对象关系型数据库管理系统（RDBMS）。它以其高度的可扩展性、稳定性和遵循标准的 SQL 实现而闻名，同时还提供了大量高级功能，支持复杂的数据库操作。
示例代码
其中使用的sql语句直接进行操作
async function seedUsers() {
await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
await client.sql`
CREATE TABLE IF NOT EXISTS users (
id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
name VARCHAR(255) NOT NULL,
email TEXT NOT NULL UNIQUE,
password TEXT NOT NULL
);
`;
const insertedUsers = await Promise.all(
users.map(async (user) => {
const hashedPassword = await bcrypt.hash(user.password, 10);
return client.sql`
INSERT INTO users (id, name, email, password)
VALUES (${user.id}, ${user.name}, ${user.email}, ${hashedPassword})
ON CONFLICT (id) DO NOTHING;
`;
})
);
return insertedUsers;
}
prisma
Prisma 是一个开源的下一代 ORM（对象关系映射）工具，旨在简化数据库的查询和管理。它为 TypeScript 和 JavaScript 开发者提供了类型安全的数据库访问方式，使开发者能够轻松地与数据库交互。
可以使用prisma进行数据库的操作，简单且方便
在Next中使用，以mysql为例
// 安装
npm install prisma --save-dev
// 初始化
npx prisma init
// 配置数据库，修改.env文件
DATABASE_URL="mysql://username:password@localhost:3306/mydb"
// username 是 MySQL 数据库的用户名
// password 是用户的密码
// localhost:3306 是 MySQL 运行的地址和端口
// mydb 是你使用的数据库名称
定义数据模型
在 prisma/schema.prisma 文件中，定义你的数据模型。一个简单的示例是创建 User 和 Post 表：
datasource db {
provider = "mysql"
url = env("DATABASE_URL")
}
generator client {
provider = "prisma-client-js"
}
model User {
id Int @id @default(autoincrement())
name String
email String @unique
posts Post[]
}
model Post {
id Int @id @default(autoincrement())
title String
content String?
userId Int
user User @relation(fields: [userId], references: [id])
}
完成后使用npx prisma db push生成表
创建 Prisma Client 实例
为了在项目中复用 Prisma Client，建议将其封装在一个模块中。你可以在 utils/db.ts 文件中这样做：
// utils/db.ts
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()
prisma
.$connect()
.then(() => {
console.log("数据库连接成功");
})
.catch((error) => {
console.error("数据库连接失败", error);
});
export default prisma
使用 Prisma Client 与数据库交互
你可以在 API 路由或页面中的 getServerSideProps、getStaticProps 函数中使用 Prisma 进行数据库查询。
API 路由示例
在 app/api/users.ts 中创建一个 API 路由，用于获取用户列表：
// app/api/route.ts
import { NextRequest, NextResponse } from "next/server";
import prisma from "../utils/db";
// 查询
export const GET = async () => {
const data = await prisma.user.findMany({
where: {},
// 排序
orderBy: {
createdAt: "desc", // 按创建时间降序排序
},
});
return NextResponse.json({
success: true,
data,
});
};
// 新增
export const POST = async (req: NextRequest) => {
const body = await req.json();
await prisma.user.create({
data: {
name: body.name,
email: body.email,
password:body.password
},
});
return NextResponse.json({
success: true,
message: "新增成功",
});
};
此时，可以正常对数据库进行操作（增删改查）。