Next.js14快速上手

时间：2024-10-28 07:00:58

文章目录

  • ***客户端***
  • 什么是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 a src/ directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for next 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: "新增成功",
  });
};

此时，可以正常对数据库进行操作（增删改查）。

相关文章