Next.js + TypeORM + TailwindCSS + (Type-)GraphQL
This project serves as the starting point of some of my SaaS products, so I'm continuously improving it.
- Social auth (via Passport.js)
- Simple team management
- Type-first approach for writing GraphQL schema
- 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 following config:
DB_USER=postgres
DB_PASS=random
DB_HOST=localhost
DB_PORT=5432
DB_NAME=mydb
You can also customize it by updating .env
file.
# Install dependencies
yarn
# Apply migrations if you're running for the first time
yarn migrate:deploy
# Start Next.js
yarn dev:server
yarn dev:app
Run the development server.
Generate React (Apollo) hooks for GraphQL queries, powered by GraphQL Code Generator
Generate Prisma client.
Save migrate files, tyoically you should run this after making changes to prisma/schema.prisma
.
Applying local migrations to the database, run this after yarn migrate:save
.
Rollback the most recent migration.
.
├── README.md
├── graphql-codegen.yml
├── graphql.schema.json # Auto-generated GraphQL schema
├── next-env.d.ts
├── next.config.js
├── package.json
├── postcss.config.js
├── prisma
│ └── schema.prisma # Database schema
├── scripts
│ └── with-env.js # Run command with `.env` file loaded
├── server
│ ├── auth.ts # Auth helpers
│ ├── constants.ts
│ ├── db.types.ts # Types from Prisma
│ ├── decorators # ES decorators, mainly for Type GraphQL resolvers
│ ├── graphql.types.ts # Types used by GraphQL resolvers
│ ├── guards # Authorization
│ ├── passport.ts # `passport` for social login
│ ├── prisma.ts # Prisma instance
│ ├── resolvers # GraphQL resolvers, powered by Type GraphQL
│ └── response.ts # HTTP response helpers
├── src
│ ├── css # CSS, mainly tailwind.css
│ ├── generated # Generate Apollo React hooks
│ ├── graphql # .graphql files
│ └── pages # Next.js pages
├── tailwind.config.js
├── tsconfig.json
├── types.d.ts
└── yarn.lock
We also added two Next.js/TS aliases: @
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 Apollo Client to execute GraphQL query, you should write GraphQL queries using SDL in src/graphql
and run yarn g:gql
to generate corresponding React hooks, and import the generated hooks from src/generated/graphql
like this:
import { useCurrentUserQuery } from '@/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