使用 Next.js , Nexus, Prisma 构建全栈项目
此教程翻译自《Complete Intruduction to Fullstack,Type-Safe GraphQL(feat.Next.js,Nexus,Prisma)》
我们将要从模板中构建全栈项目,会使用 Next.js ,Nexus,Prisma ,来实现 React 的后端渲染,GraphQL 接口。
技术栈浅析
首先,我们浅析一下我们选择的技术栈。
- TypeScript - 前后端使用统一的编程语言
- React 和 Next.js - 前端开发框架 React ,以及React 的服务端渲染库
- Urql GraphQL client - GraphQL 的客户端
- PostgreSQL - 数据库
- Nexus - 一个 code-first 的 GraphQL 服务端
- Prisma Client 和 Prisma Migrate - 用于数据库 ORM 操作的工具库(注意:Prisma Migrate 仍然在实验阶段)
现在,我们开始吧!
配置开发环境
在我们开始编写代码前,首先要配置开发环境所需要的软件,以便我们能够使用轻松的方式编写代码。
我们使用的软件编辑器是 VS Code , 它的插件库里提供了 Prisma 和 GraphQL 的代码高亮和自动格式化工具,我们先在 VS Code 中安装下面两个插件。
接下来,我们要安装 docker (我们的 PostgreSQL 数据库将在 docker 容器中运行,当然其他的云数据库或本地安装的数据库亦可),具体安装教程请前往 docker 官网。
注意事项
我们的开发工具是 mac pro 笔记本电脑,在 window 系统下的 pc 电脑运行结果如有不同,请先自行查找原因,然后在评论区留言讨论。 在命令行下运行指令,如无特别说明,一律是在项目根目录下运行。
新建一个 Next.js 项目
我们可以使用 ceate-next-app
工具包新建一个 Next.js 项目。在命令行工具输入下面的指令:
npx create-next-app prisma-next-nexus --use-yarn -e with-typescript
create-next-app
会使用 Git
自动下载项目初始化代码,并自动安装所有的依赖。指令运行完成以后,在 VS Code 打开项目目录,可以看到下图所示的项目结构。
安装 Nexus 和 Prisma
现在,我们安装 Nexus 框架和 nexus-plugin-prisma
包。在命令行工具中运行下面的指令:
yarn add nexus @prisma/client && yarn add @prisma/cli -D
Nexus 包含了提供 Typescript 语言类型编译支持的插件 Nexus TypeScript Language Service Plugin
,我们只需要在 Typescript 配置文件 tsconfig.json
中配置即可,修改代码如下:
{
"compilerOptions": {
// ...
"noEmit": true,
"rootDir": ".",
"typeRoots": ["node_modules/@types", "types"],
"plugins": [{
"name": "nexus/typescript-language-service" }] // 新增这一行
},
// ...
"include": ["**/*.ts", "**/*.tsx", ".", "types.d.ts"]
}
使用 Docker 启动数据库
我们使用 docker-compose
保存 postgresql 容器的设置,在项目根目录下添加 docker-compose-yml
文件,文件内容如下:
version: '3.1'
services:
db:
image: postgres:11.7
container_name: prisma-next-nexus-postgre
restart: always
environment:
POSTGRES_USER: prismaNextNexus
POSTGRES_PASSWORD: ${POSTGRESPWD}
ports:
- 54333:5432
volumes:
- ./db/postgresql:/var/lib/postgresql/data
其中 ${POSTGRESPWD}
是保存在 .env
文件中的数据库密码变量。同样的,在根目录下新建 .env
文件,并添加下面的代码:
POSTGRESPWD=xxxxxx // 密码
然后在命令行中输入如下指令: