Proper integration if MST and NextJS

[smigfu]

Hello all,

I have seen multiple different approaches of using MST in a NextJS application and I wanted to know if there is an official recommendation by the MST folks or any of their users.

Most of the solutions boil down to:

1. Example at NextJS , which is propagating the properties through page properties. And they are not using the React Context API (maybe it's not updated yet?).
2. This example found in different places, which is using only the React Context API.

As asked above, is there any recommendation to use one or the other?

Thanks.

[coolsoftwaretyler]

Hi @smigfu - thanks for the question!

I would probably lean towards the Next.js provided example, although it might be useful to mention that the Provider they use is React context. See here:

https://github.com/mobxjs/mobx/blob/9944edcc8450fa8d328ffcc436acddd85b90e803/packages/mobx-react/src/Provider.tsx#L11-L29

That said, I don't use Next.js much these days, so I'm really just leaning into their own recommendation. I think the fact that their example uses MST specifically also adds to its strength over the MobX answer you've posted.

Things may also change once the React Compiler is released, depending on how Next.js chooses to incorporate it. We're currently working on a path forward with the compiler, but just keep an eye out for some small changes over time.

[smigfu]

Interestingly I am frequently running into this error when following the Next.js example. That's why I though I had to use the React Context directly. :-)

What made me wonder in their examples, is that the Next.js with plain mobx and mobx-mst look so different. Is this due to some implementation within MST?
See https://github.com/vercel/next.js/tree/main/examples/with-mobx vs https://github.com/vercel/next.js/tree/main/examples/with-mobx-state-tree

Thanks for getting back on this and your answer. Looking forward for the Compiler option.

[coolsoftwaretyler]

Hey @smigfu - I pulled both of those examples, MobX and MobX-State-Tree, and I can't reproduce the error you're seeing. I tried both npm run dev and npm run build && npm run start to get it running with the dev server/built for production. Did you modify the example code in any way? And if so, can you send it my way? I'd be happy to help debug, but I can't seem to see that error at all.

Looking at the helpful link in that error message, I also see:

Or a preferred way is to use React Context directly which does not have this restriction.

Which is closer to how the MobX implementation works. For the most part, things that work for MobX will work with MST. The two libraries are pretty tightly integrated. There's definitely more rules in MST that you have to follow, but I think that pattern makes sense as well.

I'm sorry I don't have a stronger opinion on this. I don't work with Next.js often enough, so I still would defer to the code samples they've got, or if anyone else in the community uses MST with Next.js.

[smigfu]

I apologize for not clarifying earlier that I am using my own implementation based on the MobX-State-Tree example from the Next.js repository. I encounter an error whenever I add or modify something in the tree during development.

From what you are suggesting, it seems that using React Context directly is the preferred approach. So, I could adapt the with-mobx-state-tree example to replace the context provided by mobx-react with a standard React Context.

While I understand that not everyone may have used Next.js in the past, it has become one of the main options for starting a React project (as noted here). Since I have some experience with Next.js and am currently experimenting with MobX (coming from Redux), I used the example despite it being overkill for my small toy project.

That said, given Next.js's prominence today, having an official "blueprint" for integrating mobx-state-tree into Next.js would be valuable for developers.

Thanks for all your input so far :-)

[coolsoftwaretyler]

Thanks @smigfu! That's useful feedback.

I agree it would be good to have some integration docs for popular libraries. Our docs overall could use some love.

I think Next presents a challenge for a good blueprint because of all the different ways it can be used (SSG, SSR, SPAs, MPAs). But that's even more reason for us to provide additional guidance.

Anyway, I think the context approach makes sense. If you want to make an impact for MST, I'd actually love to hear about how it goes as you integrate. Feel free to drop some more notes in this discussion thread.

Thanks and good luck!