Next.Js Example

Online multiplayer chess built with React (Next.js), Express, and

March 18th, 2023

Online multiplayer chess built with React (Next.js), Express, and's picture



❗ This project is still in the early stages of development and should be considered unstable. Expect bugs and weird behavior.

Yet another Chess web app. Live demo at

  • play against other users in real-time
  • spectate and chat in ongoing games with other users
  • optional user accounts for tracking stats and game history (wip)
  • mobile-friendly (wip)

Built with Next.js 13, Tailwind CSS + daisyUI, react-chessboard, chess.js, Express.js, and PostgreSQL.


This project is structured as a monorepo using npm workspaces, separated into three packages:

  • client - Next.js application for the front-end, deployed to
  • server - Node/Express.js application for the back-end, deployed to
  • types - Shared type definitions for the client and server.


# install all dependencies, including eslint and prettier for development npm install # concurrently run frontend and backend development servers npm run dev # -w client/server to run only one # for separate production deployments npm install -w client npm install -w server npm run build -w client npm run build -w server npm start -w client npm start -w server

For separate deployments, you may exclude the client or server directory. However, you should include the types folder as it contains shared type definitions that are required by both packages.

Environment variables

You may create a .env file in each package directory to set their environment variables.


NEXT_PUBLIC_API_URL=http://localhost:3001 # replace with backend URL


CORS_ORIGIN=http://localhost:3000 # replace with frontend URL PORT=3001 SESSION_SECRET=randomstring # replace for security # PostgreSQL connection info (required) PGUSER=exampleuser PGPASSWORD=examplepassword PGDATABASE=chessu

Share this:

Nedx © 2023