Next. js 14 With Mobx #3805

mawaisismail · 2023-11-28T04:17:55Z

mawaisismail
Nov 28, 2023

i tried to create state management with the next.js 14 app router with mobx but some how its not working its changing stats in store but not reflect on UI i also added observer but still not working in there any way to solve it ? and i created context to share the store globally.

Please share if anyone integrates Mobx in Next. js With app router

Answered by mawaisismail

Nov 28, 2023

I fount solution for this this is how i implement mobx with next.js 14

store

export class UiStore {
  count = 0;
  constructor() {
    makeAutoObservable(this);
  }

  increment = () => {
    this.count++;
  };
}

group all store

export const RootStore = {
  uiStore,
};

provider

"use client";
import React, { createContext, ReactNode } from "react";
import { RootStore } from "@/store/store";

export const StoreContext = createContext(RootStore);

export const StoreWrapper = ({ children }: { children: ReactNode }) => {
  return (
    <StoreContext.Provider value={RootStore}>{children}</StoreContext.Provider>
  );
};

main layout

  <StoreWrapper>{children}</StoreWrapper>


//hook to get stores

…

View full answer

mawaisismail · 2023-11-28T09:36:41Z

mawaisismail
Nov 28, 2023
Author

I fount solution for this this is how i implement mobx with next.js 14

store

export class UiStore {
  count = 0;
  constructor() {
    makeAutoObservable(this);
  }

  increment = () => {
    this.count++;
  };
}

group all store

export const RootStore = {
  uiStore,
};

provider

"use client";
import React, { createContext, ReactNode } from "react";
import { RootStore } from "@/store/store";

export const StoreContext = createContext(RootStore);

export const StoreWrapper = ({ children }: { children: ReactNode }) => {
  return (
    <StoreContext.Provider value={RootStore}>{children}</StoreContext.Provider>
  );
};

main layout

  <StoreWrapper>{children}</StoreWrapper>


//hook to get stores

import { useContext } from "react";
import { StoreContext } from "@/store/provider";

export const useStores = () => {
  return useContext(StoreContext);
};

component where you want to use store

"use client";
import { observer } from "mobx-react";
import { useStores } from "@/hooks/useStore";

const HomePage = observer(() => {
  const {
    uiStore: { count, increment },
  } = useStores();

  return (
    <>
      <div>{count}</div>
      <button onClick={increment}>Increment</button>)
    </>
  );
});

export default HomePage;

jymartineau Jun 25, 2024

This is awesome, worked right away for me!

ideaviewes · 2023-12-21T02:32:56Z

ideaviewes
Dec 21, 2023

How to initialize uiStore ？I can not find you initialize it anywhere
export const RootStore = { uiStore, };
Thank you for your help.

2 replies

mawaisismail Dec 21, 2023
Author

Here's complete code

useStores

import { useContext } from "react";
import { StoreContext } from "@/store/provider";

export const useStores = () => {
  return useContext(StoreContext);
};

StoreContext

"use client";
import React, { createContext, ReactNode } from "react";
import { RootStore } from "@/store/store";

export const StoreContext = createContext(RootStore);

export const StoreWrapper = ({ children }: { children: ReactNode }) => {
  return (
    <StoreContext.Provider value={RootStore}>{children}</StoreContext.Provider>
  );
};

RootStore

import { UserStore } from "@/store/user-store";
import { UiStore } from "@/store/ui-store";
import { AccountStore } from "@/store/account-store";

const uiStore = new UiStore();
const userStore = new UserStore(uiStore);
const accountStore = new AccountStore(uiStore);
export const RootStore = {
  uiStore,
  userStore,
  accountStore,
};

Root layout / page

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" className="w-full h-full">
      <body className="h-full w-full">
        <StoreWrapper>{children}</StoreWrapper>
      </body>
    </html>
  );
}

Use in component

"use client";
import { ReactNode } from "react";
import { observer } from "mobx-react";
import { useStores } from "@/hooks/useStore";
import { Header } from "@/components/header";

const HomePage = observer(({ children }: { children: ReactNode }) => {
  const {
    uiStore: { isLoading },
  } = useStores();

  if (isLoading) {
    return <div>Loading ...</div>;
  }

  return (
    <>
      <Header />
      {children}
    </>
  );
});
export default HomePage;

Note : You need to wrap component with observer if you want to get real time changes else you need to render component to get updated values .

And you can create your own stores and initialize in root store and share in whole app by context api

NileshJain78 May 23, 2024

what about the ssr because if the component is marked as use client then it will refresh itself

ideaviewes · 2023-12-21T08:39:22Z

ideaviewes
Dec 21, 2023

Thank you so much for your response. My project still isn't meeting expectations. Could you please take a look? I would greatly appreciate it.
https://github.com/ideaviewes/mobx-learn.git

4 replies

mawaisismail Dec 21, 2023
Author

import {makeAutoObservable, makeObservable} from 'mobx';
change makeObservable to makeAutoObservable

ideaviewes Dec 21, 2023

It works Thank you so much！！

el-frontend Apr 30, 2024

That works for me too, thank you!!!

sungjun-finda May 9, 2024

I'm trying to handle same problem, but I encouter the new issue that my stores are mostly use subclassing or super pattern so I cannot change my all model to makeAutoObservable. (also using many annotation style)

So I wonder that...

Why changing model to makeAutoObservable can be worked?
Is there another way to handle this problem...?

wertyga · 2024-05-05T19:51:11Z

wertyga
May 5, 2024

Do you understand that your code will work only on client?

0 replies

KaneLabs · 2024-11-11T01:04:10Z

KaneLabs
Nov 11, 2024

Not only will it only work on the client, it still needs SSR.

0 replies

maksymKhaiuk1989 · 2025-07-17T08:53:25Z

maksymKhaiuk1989
Jul 17, 2025

I tried with latest next js with app router, with following libs, all works totaly fine, without any providers

     "mobx": "^6.13.7",
    "mobx-react-lite": "^4.1.0",
    "next": "latest",

store

import { makeAutoObservable } from "mobx";

class MobxStore {
  count = 0;
  constructor() {
    makeAutoObservable(this);
  }

  increment = () => {
    this.count += 1;
  };

  decrement = () => {
    if (this.count > 0) {
      this.count -= 1;
    }
  };
}

export const mobxStore = new MobxStore();

component

import { observer } from "mobx-react-lite";
import { mobxStore } from "@/lib/mobx";

const Counter = observer(() => {
  const { count, increment, decrement } = mobxStore;
  return (
    <div>
      <h1>
        Count: <span>{count}</span>
      </h1>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
    </div>
  );
});

1 reply

ai-songee Aug 8, 2025

Thank you for your approach! It is working well in a single page app which only have 1 store.

But the store is initialized globally here and will not be disposed forever, it will become an issue when you add more pages and stores to your app. If you have multiple pages and stores, don't forget to manage the lifecycle of each store, dispose them when the view is unmounted. The context provider approach mentioned above should be a good solution.

Uh oh!

Next. js 14 With Mobx #3805

Uh oh!

Replies: 6 comments · 8 replies

Uh oh!

Uh oh!

mawaisismail Nov 28, 2023 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mawaisismail Dec 21, 2023 Author

Uh oh!

Uh oh!

Uh oh!

mawaisismail Dec 21, 2023 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 6 comments 8 replies

mawaisismail
Nov 28, 2023
Author

mawaisismail Dec 21, 2023
Author

mawaisismail Dec 21, 2023
Author