/nextjs-with-mobx

Demo of using MobX store in a Next.js app

Primary LanguageJavaScript

Next.js with MobX

Demo of using MobX stores in a Next.js app.

Getting started

  1. yarn
  2. yarn dev

In the browser, try navigating to posts (/post/1 etc.) and clicking "Update".

Features

The example started from this blog post by Mike Lewis which is an adaptation of the official with-mobx example. I have added these features:

  • Full reactivity
  • Safe serialization of stores between server and client
  • useMobxStores() hook which is a slight wrapper around React context

Safe serialization

As noted e.g. here, more complex stores cannot be automatically serialized via the built-in JSON.stringify – there can be circular references etc.

So the example implements the "initial data" pattern:

  • At the end of App.getInitialProps, stores return their plain data representation.
  • This is serialized by Next.js and sent to client for hydration.
  • In the render function, stores are created again from these initial data.