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.
- Query database with Prisma
- Type-first approach for writing GraphQL schema
- TailwindCSS
- More to come..
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.
# Install dependencies
yarn
# Apply migrations if you're running for the first time
yarn migrate-dev
# Start Next.js
yarn dev
Run the development server.
Build for production.
Generate React (urql) hooks for GraphQL queries, powered by GraphQL Code Generator
Generate Prisma client.
For development only
Save migrate files, and apply changes to database, typically you should run this after making changes to prisma/schema.prisma
.
For production only
Applying local migrations to the database.
We also added two Next.js/TS aliases: $src
for src
folder and $server
for server
folder.
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>
Use PascalCase for Component name, otherwise camelCase is preferred.
Use PascalCase for React component files, other wise use kebab-case.
MIT © EGOIST