Next.js + Keystone Web App

TODO

• to fix: cookies syncing for nextjs and keystone admin ui: Error: Bad hmac value

Getting Started

Prerequisites

• NodeJS: ^20.17.0
• Bun

Installation

• bun install
• bun run init

Development

• NextJS: bun run dev:nx
  • It starts a Next.js app on http://localhost:4000, and KeystoneJS GraphQL API will be available on http://localhost:4000/api/graphql
• Keystone Admin UI: bun run dev:ks
  • http://localhost:3000

Migration

• bun run migrate: Database Migration

Deploy

• Deploy on fly.io
  • Create fly app: fly app create <app name>
  • Set env: fly secrets set DATABASE_URL=<DATABASE_URL> and other secrets as well if needed
  • set build args in fly.toml
  • run fly deploy
• Github Actions
  • secrets: FLY_API_TOKEN, DATABASE_URL
• Build with docker: docker build -t nextks .

Pages & APIs

Frontend

• NextJS Entry Page: src/app/page.tsx
• KeystoneJS Admin UI Custom Pages: admin/pages/custom
  • using /custom as path prefix to avoid conflicts with keystone generated paths
• KeystonJS Custom NextJS Pages admin/pages/custom with Pages Router

Data & API

GraphQL Client

• src/keystone/graphql.ts

Server Context

• src/keystone/context.ts
  • NextJS Route Handlers
  • Server Actions
    • use getContextWithSession() to get context with user session

Notes

• @prisma/client needs to stay at 5.19.0 for keystone to run

Docs

• App: Next.js
• CMS: KeystoneJS
• Style: TailwindCSS
• Data Fetching: SWR
• Data Processing: Lodash
• State Management: Valtio

Other Readings

• Add support for developers to replace the default esbuild configuration #9235
• Configure Prisma Client with PgBouncer