devchristam / nextjs-graphql-fullstack

A Next.js full-stack boilerplate with type-safe end-to-end GraphQL API connection, authorization and authentication

NextJS GraphQL Fullstack Template

A Next.js full-stack boilerplate with type-safe end-to-end GraphQL API connection, authorization and authentication

• demo

Features

• NextJS

• Pnpm for package manager

• Typescript

• ESLint with react, prettier and tailwindcss plugin

• Prettier

• NextJS Layouts boilerplate

• TailwindCSS

• React Query with React Query Devtool

• GraphQL Request for graphql fetcher

• GraphQL Codegen for react-query and graphql-request frontend code generation

• NextAuth for authentication

• GraphQL Yoga integrated graphql server with Next.js API Route.

• TypeGraphQL for defining graphql schema, validation and role based authorization

• Prisma for database model definition and ORM

Getting started

npx degit devchristam/nextjs-graphql-fullstack my-next-app
cd my-next-app
pnpm i

Checklist

When you use this template, follow this checklist to update your info properly

• Change the author name in LICENSE
• Change the project name in package.json
• Run cp .env.sample .env and fill in your info in .env
• Clean up demonstration code (browse posts, read post)
  • ./src/frontend
  • ./src/pages
  • ./src/server
  • ./prisma/schema.prisma
• Clean up the README.md

Usage

Set up database

pnpm run prisma:db-push

recommend to use PlatnetScale for your mysql database, if you don't want to use planetscale for development, you can run docker-compose up -d for a mysql image.

Development

pnpm run dev

run the dev server at http://localhost:3000, you can visit http://localhost:3000/api/graphql for graphiql (disable at production)

pnpm run codegen

run graphql codegen to generate frontend code, all the generated code will located at ./src/generated/*

the ./src/generated/schema.gql is generated by typegraphql automatically on every build of the schema (link), please make sure run the pnpm run codegen command after the new ./src/generated/schema.gql is generated

pnpm run dev:codegen

if you want to run the graphql codegen in watch mode and run the dev server concurrently

Build

pnpm run build
# run graphql codegen and build nextjs
pnpm run build:codegen