nexus启动命令_使用 Next.js , Nexus, Prisma 构建全栈项目

使用 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  // 密码

然后在命令行中输入如下指令：