sethmcleod / next-app

⚡️ Type-safe Next.js and GraphQL boilerplate

⚡️ Next App

Next App is a full-stack, type-safe boilerplate for building SaaS apps. It includes everything you need to hit the ground running on a new project.

Here are some of the technologies used:

• Next.js as the React framework
• TypeScript as the programming language
• Chakra UI as the React component library
• urql as the GraphQL client
• Nexus for constructing the GraphQL schema
• Prisma as the ORM for managing the database and migrations
• PostgreSQL as the database
• Vercel for deployments and infrastructure
• Stripe for handling subscriptions and payments
• Postmark as the email API

Getting started

Initial setup

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

cp .env.example .env

Now you're ready to set everything up locally:

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

2. Switch to the correct Node version with nvm:

nvm use

3. Install the dependencies with yarn:

yarn

4. Start the local development database as well as the Stripe CLI webhook listener with docker compose:

docker compose up

5. Copy the webhook signing secret that the Stripe CLI logged and add it to your .env file.

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

yarn prisma:migrate

Development workflow

To develop your app, you always need to have two commands running concurrently:

1. Start the development database with:

docker compose up

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

yarn dev

That's it! Now you can visit http://localhost:3000 🎉

Scripts

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

• yarn 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.

• yarn 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.

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

• yarn cypress:open: Opens Cypress so you can write and run your end-to-end tests. (docs)

All the others are used in CI or by those three main scripts, but you should only rarely need to run them manually.

---

Crafted with ❤️ and 🍺

Inspired by Bedrock by Max Stoiber