NextJS with React

[cli3267]

Hi! I'm currently using Mobx for my Senior Design Project, but I am having trouble with the integration of it. I am currently using NextJs, Firebase, React and Mobx, and in my _app.js, I can see that the store is there (when I console.log(initialMobxState), but when I try to console.log(props) in a component, it shows it as an empty list rather than showing the stores I have injected, I'm not sure what I am doing wrong and I have been looking at this for hours now, any suggestions would help :)

const SeniorD = ({ Component, pageProps, initialMobxState }) => {
  if (initialMobxState) {
    const isServer = typeof window === 'undefined'
    initialMobxState = isServer
      ? initialMobxState
      : initalizeStore(initialMobxState)
  }
  return (
    <AuthProvider>
      <Provider {...initialMobxState}>
        <Component {...pageProps} />
        <link rel='preconnect' href='https://fonts.gstatic.com' />
        <link
          href='https://fonts.googleapis.com/css2?family=Nunito&display=swap'
          rel='stylesheet'
        />
        <link rel='preconnect' href='https://fonts.gstatic.com' />
        <link
          href='https://fonts.googleapis.com/css2?family=Arvo&display=swap'
          rel='stylesheet'
        />
      </Provider>
    </AuthProvider>
  )
}

SeniorD.getInitialProps = async appContext => {
  const appProps = await App.getInitialProps(appContext)
  try {
    const mobxStore = initalizeStore()
    appContext.ctx.mobxStore = mobxStore
    return { ...appProps, initialMobxState: mobxStore }
  } catch (error) {
    return { ...appProps }
  }
}

[codeBelt]

A good article to start with is https://dev.to/ivandotv/mobx-server-side-rendering-with-next-js-4m18

I will take a look at your code and see whats up. Do you have it on a public repo?

[cli3267]

yes I am

This is how I am initializing the store

import { enableStaticRendering } from 'mobx-react'

import UserStore from './user'

const isServer = typeof window === 'undefined'

enableStaticRendering(isServer)

let store = null

export function initalizeStore(initialData = { userStore: {} }) {
  if (isServer && typeof window === 'undefined') {
    return {
      userStore: new UserStore(initialData.userStore),
    }
  }
  if (store === null) {
    store = {
      userStore: new UserStore(initialData.userStore),
    }
  }

  return store
}

[cli3267]

And just a basic example of one of our components:

import NavMenu from './NavMenu'
import { observer } from 'mobx-react'

const Home = observer(props => {
  console.log(props)
  // need to figure out how to get the store to the component
  return (
    <div className='main'>
      <NavMenu />
      <main>
        <p>Home</p>
      </main>
    </div>
  )
})

export default Home

[codeBelt]

It's hard when I can't see a running app. Maybe you could create a simple single page Next.js just doing the basics. No Firebase just an api call to get some data. You could use https://randomuser.me/ for sample data.

From looking at your code I am not sure if you should be creating the mobx store in getInitialProps and passing it down. What is your Provider component? You should take a look at that article again and create the mobx store in the provider and look how he suggests hydrating the store from the pageProps.

[cli3267]

Ahhh okay, I'm using the Provider component from mobx-react

[cli3267]

@codeBelt thank you so much :) I looked back and implement my own context and provider and it worked accordingly!