This codebase was created to demonstrate a fully fledged fullstack application built with Next.js, Apollo GraphQL stack and Prisma including CRUD operations, authentication, routing, pagination, and more.
- Prisma ORM (v4.0 seems supports Node version 14 or later)
- Apollo Server mounted on the API route of Next.js pages
- Nexus as a code-first GraphQL schema generator
- Next.js
- Apollo Client together with GraphQL Code Generator
- Tailwind CSS
- Pagination: use Prisma cursor-based query as well as Apollo Client
fetchMore
approach to implement a infinity load-more feature on the feed list and comment list. - Form Validation: including a Yup schema check and React Hook Form for frontend form validation.
pages
All pages of a regular Next.js app.pages/api/index.ts
The API route, mounting a GraphQL server instance within a Prisma client.components
Contains all page components.generated
Codes generated by Nexus and GraphQL Code Generator.lib/api
Schema definitions of the GraphQL server.lib/api/prisma.ts
Prisma client configs here.lib/cache/index.ts
Cache config of Apollo client.lib/schemas
Schema definitions for the frontend.lib/constants.ts
App configs init.prisma/schema.prisma
Definitions of database.config.js
Build configs used innext.config.original.js
.
First, install dependencies
yarn
And setup your owner MySQL server config in a .env
file(see example in .env.example
)
DATABASE_URL="mysql://root:pass@localhost/real_blog?useUnicode=true&characterEncoding=utf8&useSSL=false"
Then run a Prisma migration script on your database
yarn db:migrate
Next, generate a JWK key pairs for the JWT based authentication, this script just print out the key pairs in the console
yarn generate:jwk
You should put the new generated PRIVATE_JWK into the .env
file and the PUBLIC_JWK to lib/constants.ts
as below
PRIVATE_JWK={your_generated_private_jwk}
export const PUBLIC_JWK = {
kty: 'RSA' as const,
...
};
Last, run the common Next.js script to start
yarn dev
Point http://localhost:3000 to the app's home page and http://localhost:3000/api would redirect to Apollo Studio to show all the GraphQL API(Only accessible in a development env)
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.