https://github.com/borekb/nextjs-with-mobx

Demo of using MobX store in a Next.js app
https://github.com/borekb/nextjs-with-mobx

Last synced: 9 days ago
JSON representation

Demo of using MobX store in a Next.js app

• Host: GitHub
• URL: https://github.com/borekb/nextjs-with-mobx
• Owner: borekb
• Created: 2019-08-10T12:14:22.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T06:48:31.000Z (almost 2 years ago)
• Last Synced: 2024-10-03T05:21:53.637Z (about 2 months ago)
• Language: JavaScript
• Size: 1.02 MB
• Stars: 33
• Watchers: 3
• Forks: 10
• Open Issues: 17
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](https://www.themikelewis.com/post/nextjs-with-mobx) by Mike Lewis which is an adaptation of the official [`with-mobx` example](https://github.com/zeit/next.js/tree/master/examples/with-mobx). 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](https://github.com/zeit/next.js/issues/5534#issuecomment-448578052), 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.