A personal boilerplate based on Next.js.
features：Next.js, TypeScript, GraphQL, Prisma, Tailwind CSS
I built this boilerplate in the following order.
- Next.js: start with typescipt version create-next-app
- TypeScript: follow the typescript writing style for this simple example
- ESLint + Prettier: ESLint and Prettier with VSCode integration
- Tailwind CSS: setting up Tailwind CSS in a Next.js project
- GraphQL (client): use Apollo Client in Next.js
- GraphQL (server): use Apollo Server in Next.js
- Prisma (basic): basic setup (e.g. schema, migrating, seeding)
- Prisma (GraphQL): prisma with GraphQL integration based on Nexus
Before getting start, please make sure you have created an empty database (e.g. PostgreSQL). Then, rename .env.example to .env and edit the environment variable. This will enable Prisma database connection, and the GraphQL communicate between client and server.
- Install npm dependencies
npm install
- Create and seed the database
npx prisma migrate dev --name init
- Seed the database with the sample data in
prisma/seed.ts
npx prisma db seed
- Start the app
npm run dev
You can use the following command to reset the database. It will also automatically seed the database as well.
npx prisma migrate reset
Don't forget to push the database structure again.
npx prisma db push