next-real-world

About

Demo RealWorld

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.

Used Stacks

backend

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

frontend

Next.js
Apollo Client together with GraphQL Code Generator
Tailwind CSS

Features

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.

Folder Structure

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 in next.config.original.js.

Getting Started

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)

Learn More

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!

Deploy on Vercel

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.

alayek/jimmys-blog