搞了一个 Nextjs、Graphql 项目的模版，Nodejs开发者可以用这个模版初始化你的 Nextjs 项目。

项目地址： https://github.com/chenzn1/awesome-examples
模版地址： https://github.com/chenzn1/awesome-examples/tree/master/examples/nextjs-prisma-graphql-example

因为这个项目是打算做成模版库，所以是 Monorepo 的架构。
说回这个 Nextjs 、Graphql 模版，它集成了一下技术库：

项目结构

.
├── prisma
├── src
│   ├── app
│   ├── client
│   │   ├── components
│   │   ├── graphql
│   │   ├── utils
│   ├── server
│   │   ├── drives
│   │   ├── entities
│   │   ├── errors
│   │   ├── interfaces
│   │   ├── resolvers
│   │   ├── servers
│   │   ├── graphql-builder.ts
│   │   ├── graphql-schema.ts
│   ├── shared
│   ├── tests
│   │   ├── fixtures

项目的文件命名风格是 {xx}-{xx}.{modal|entity|service|resolver|...}.{ts|tsx|...} ，比如：

  • create-user.modal.tsx
  • update-user.modal.tsx
  • user.entity.ts
  • user.d.ts
  • user.servier.ts

如果大家觉得好用，就给个 star 吧，以后还会不定时更新其它的模版。


搞了一个 Nextjs、Graphql 项目的模版，Nodejs开发者可以用这个模版初始化你的 Nextjs 项目。

3 回复

nextjs 不是取消了 src 目录吗？


nextjs 初始化可以时候可以选择是否要 src

非常感谢你分享这个 Next.js 和 GraphQL 项目的模板，这对 Node.js 开发者来说是一个非常有用的资源。下面我将简要介绍如何使用这个模板来初始化一个 Next.js 项目，并附上一些关键代码示例，帮助你快速上手。

步骤一：克隆模板仓库

首先，你需要克隆模板仓库到你的本地环境。假设模板仓库的 URL 为 https://github.com/your-username/nextjs-graphql-template，你可以使用以下命令：

git clone https://github.com/your-username/nextjs-graphql-template my-nextjs-project
cd my-nextjs-project

步骤二：安装依赖

进入项目目录后，你需要安装项目所需的依赖：

npm install

步骤三：运行开发服务器

安装完依赖后，你可以运行开发服务器来查看项目：

npm run dev

关键代码示例

以下是 pages/api/graphql.js 文件的一个简单示例，展示了如何设置 GraphQL API：

// pages/api/graphql.js
import { ApolloServer, gql } from 'apollo-server-micro';

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

export const config = {
  api: {
    bodyParser: false, // Disable default body parser
  },
};

export default server.createHandler({ path: '/api/graphql' });

希望这个指南能帮助你快速启动你的 Next.js 项目！如果你有任何问题或需要进一步的帮助，请随时提问。

回到顶部