Conduit

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.