Next.js + TypeScript + Prisma + GraphQL example

About

This is an example implementation of a simple blog app using Next.js, TypeScript, Prisma, and GraphQL.

Libraries used

Base framework

• Next.js

DB

• ORM: Prisma

GraphQL

• client: Apollo Client
• server: Apollo Server
• server (Next.js integration): apollo-server-integration-next
• code generator: GraphQL Code Generator

UI

• CSS framework: Tailwind CSS

Notes on the implementation

Data fetching

In this example, the GraphQL server runs on the /api/graphql endpoint of Next.js, and the frontend uses client side rendering (CSR).

If you want to use server side rendering (SSR), check this discussion.

App directory vs pages directory

This example uses the "app directory" system of Next.js.

For the "pages directory" system, implementation guide can be found here, for example.

Run locally

Prerequisites: Node.js (>= v16), pnpm, Docker

1. Install dependencies

pnpm install

2. create .env.local file with the following content

DATABASE_URL="postgresql://postgres:admin@localhost:5432/postgres?schema=public"

3. Make sure that you have Docker running, and then run the following command

pnpm dev

4. Setup the database

pnpm setup:db

5. Open http://localhost:3000

Deploy

You can choose any hosting provider that supports Next.js and PostgreSQL.

For example, Vercel and Supabase are good choices.

When setting up DB in Supabase, you can follow this instruction.
After setting up the .env file with DATABASE_URL and SHADOW_DATABASE_URL, run pnpm prisma migrate dev to create tables.
Then, run pnpm prisma db seed to add seed data.