A Quick Tour of the Starter App
There's really just a few key bits:
src/todo.ts
defines the todo entity. You will typically have one such file for each entity in your application.src/mutators.ts
defines the Replicache mutators for the todo app. Replicache mutators run twice: first immediately and optimistically on the client, then later authoritatively on the server. Replicache automatically reconciles differences between the optimistic and authoritative runs continuously on all clients.pages/index.tsx
is the app's entrypoint. It generates a new random todo list ID and redirects to it.pages/d/[id].tsx
is the handler for a todo list. It instantiates Replicache.src/app.tsx
is the top-level component. It subscribes to all todos in Replicache and renders them. It also wires up event handlers from the app to Replicache mutators.- The server side is implemented with replicache-nextjs. This is a simple, generic Replicache server built on Next.js and Postgres. It is wired up in
pages/api/replicache/[op].ts
.
Next
Now let's add a simple feature to this app.