Next.js GraphQl Starter

Tech stack

1. Next.js
2. Prisma
3. Nexus
4. GraphQL Codegen
5. Urql
6. Apollo-server-micro
7. Eslint + Prettier
8. Lint-staged + Simple-git-hooks

Initial setup

1. Copy .env.example to .env and fill out the .env file with your environment variables:

cp .env.example .env

1. Install Docker by following their installation instructions for your OS. Docker is used to start the local development database.

2. Install the dependencies with npm:

npm install

3. Start the local development database with docker-compose:

docker-compose up

4. Migrate your local development database to the base schema:

npx prisma migrate dev

Development workflow

1. Start the development database with:

docker-compose up

2. Start the development process, which also runs all the necessary code generators:

npm run dev

Now you should have project running locally and should be able to visit http://localhost:3000 🎉

Scripts

The three most important commands you'll run frequently during development:

• npm run generate: Generates the Prisma client (docs), which Nexus uses and generates the GraphQL schema (docs), which GraphQL Codegen uses and generates the urql hooks (docs). Run this whenever you change the database schema, GraphQL schema or GraphQL queries.

• npm run prisma:migrate: Creates migration files from your Prisma schema changes and runs those migrations on your local dev db (docs). Run this whenever you change your database schema.

• npm run prisma:studio: Starts Prisma Studio on localhost:5555 where you can inspect your local development database.