Next FullStack Starter

Next.js + Prisma + TailwindCSS + (Type-)GraphQL

This project serves as the starting point of some of my SaaS products, so I'm continuously improving it.

Features

Query database with Prisma
Type-first approach for writing GraphQL schema
TailwindCSS
More to come..

Documentation

Prerequisites

Moving .env.example to .env.

Then get your database ready, install PostgreSQL and make sure you have a user and database matching the default one we use:

DB_URL="postgresql://postgres:pass@localhost:5432/mydb?schema=public"

You can also customize it by updating .env file.

Development

# Install dependencies
yarn

# Apply migrations if you're running for the first time
yarn migrate-dev

# Start Next.js
yarn dev

NPM Scripts

`yarn dev`

Run the development server.

`yarn build`

Build for production.

`yarn gql-gen`

Generate React (urql) hooks for GraphQL queries, powered by GraphQL Code Generator

`yarn prisma-client`

Generate Prisma client.

`yarn migrate-dev`

For development only

Save migrate files, and apply changes to database, typically you should run this after making changes to prisma/schema.prisma.

`yarn migrate-deploy`

For production only

Applying local migrations to the database.

webpack

Aliases

We also added two Next.js/TS aliases: $src for src folder and $server for server folder.

GraphQL

We create a GraphQL at /api/graphql using Apollo Server and Type GraphQL, GraphQL resolvers are populated at server/resolvers, consult Type GraphQL docs for more.

Every time you create a new resolver file you need to add it to src/pages/api/graphql.ts.

On the client-side we use urql to execute GraphQL queries, you should write GraphQL queries using SDL in src/graphql and run yarn gql-gen to generate corresponding React hooks, and import the generated hooks from src/generated/graphql like this:

import { useCurrentUserQuery } from '$src/generated/graphql'

const currentUser = useCurrentUserQuery()

if (currentUser.loading) {
  return null
}

return <div>{currentUser.data.currentUser.name}</div>

nirtamir2 / next-fullstack-starter