(Choosing our own) Adventures in Next.js
summary
Build uses Next.js with XState to model the story as a directed graph state machine, Netlify Forms that trigger Netlify Functions which upsert characters into Hasura, and next-on-netlify to enable SSR on Netlify. The result is a crowdsourced mad‑lib choose‑your‑own‑adventure that randomizes contributed characters, embeds pronoun and smell substitutions, and reflects the exact path in the URL. Inspector visualization generates the state graph, functions push and pull to Hasura, and the live demo works end‑to‑end.
AI-written summary · about
chapters (10)
- 0:00Start
- 2:27Trees!
- 3:54Directed Graphs!
- 5:10User Input Driven State Machines!
- 5:54XState + React + Next.js
- 6:31Netlify Forms
- 6:50Netlify Functions
- 7:23A Spooky Brain
- 19:16next-adventure.netlify.app
- 19:29What we've learned
related talks
21mLive-coding demo
13mBuilding Generative UI with Next.js
02mThis or That Challenge – Sébastien Chopin
21mUsing Next.JS and Redux for Epic Noscript Web Apps
40mGoing Static in a Dynamic World with Hasura and Nuxt.js
41mStatic Sites and Serverless Functions - A Dynamic Combination
57mJavaScript Framework Cage Match
27mGoing Static in a Dynamic World with Hasura and Nuxt.js