【实战博客项目01】 Nextjs + Nest.js 前后端写个博客系统

南蓝
368 阅读2分钟

很想前后端一起写个博客项目，这样的话，以后有什么新的技术栈在公司项目不方便实践，在自己的项目中可以先试水。这次实战前后端包括部署都学到了不少东西，下面整理记录下。

项目简介

如寻常博客系统一样， 主要功能包括 文章展示、归档、标签、搜索等功能

image.png

主要技术栈

前端（Next.js）

  • 主框架: Next.js，号称能够构建全栈应用，但我还是主要奔着他是个 SSR 框架，后端还是用 Nest 写
  • UI 库: shadcn，基于 radix-ui 做得,这个组件库不是通过 npm 安装，而是直接将代码下载到你的本地，方便你定制化
  • CSS: Taliwind
  • 数据请求：react-query
  • 状态管理： zustand

后端(Nest.js)

数据库

项目结构

这是一个 MonoRepo 项目，packages 下面前后端在一起

image.png

开始安装

前端

安装 Next.js

在 /packages/nanlan-blog-client-next.js 下面安装 Next.js

# 自动安装
npx create-next-app@latest

1739949848098.png

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
 }
  • dev：运行 next dev 以在开发模式下启动 Next.js。
  • build：运行 next build 以构建用于生产环境的应用程序。
  • start：运行 next start 以启动 Next.js 生产服务器。
  • lint：运行 next lint 以设置 Next.js 的内置 ESLint 配置。
添加 shadcn
pnpm dlx shadcn@latest init
  • 添加 shadcn ui
# 初始化
pnpm dlx shadcn init

1739949848098.png

初始化完之后会在项目根目录下看到 component.json

image.png

具体配置可以看 schema。 着重说下 aliases 这个配置，一开始我以为配置 aliases 不是在 tsconfig.json 下面嘛，为啥这里还要配置呢？ 原来是为了帮助 shadcn 在本地的生成组件放在正确的位置

由于并不是直接安装 shadcn, 它本身的相关依赖会被安装到 package.json 下面 初始化之后也会多几个依赖

# package.json
  "dependencies": {
    "@radix-ui/react-dialog": "^1.1.6",
    "@radix-ui/react-slot": "^1.1.2",
    "class-variance-authority": "^0.7.1",// 一个用于构建类型安全的 UI 组件变体的工具库
    "clsx": "^2.1.1",
    "lucide-react": "^0.475.0", 
    "tailwind-merge": "^3.0.1",
    "tailwindcss-animate": "^1.0.7"
  }

也会在 tailwind.config 加入相关配置

  • 添加组件
pnpm dlx shadcn@latest add  button card dialog input ...

这个时候代码会添加到本地components/ui 下面

image.png

安装 react-query
pnpm install @tanstack/react-query

后端

安装 Nest.js

在 /packages/nanlan-blog-server-nest.js 下面安装 Next.js

$ pnpm i -g @nestjs/cli
$ nest new project-name
安装 prisma
# 安装
pnpm install @prisma/client

# prisma 生成
pnpm generate

配置数据库

// schema.prisma
datasource db {
  provider = "mongodb"
  url      = env("DATABASE_URL")
}

启动项目

可以安装 turopack 在根目录启动

// package.json

"scripts": {
   "build": "turbo run build",
   "dev": "turbo run dev",
   "start": "turbo run start",
   "lint": "turbo run lint"
}

或者自己写个

// package.json
"scripts": {
 "start:server": "pnpm --filter nanlan-blog-server-nestjs dev",
 "start:client": "pnpm --filter nanlan-blog-nextjs dev",
 }
avatar
文章
阅读
粉丝