next.js with mobx

env_store-v1.js

const messages = [
    "nice to have you here",
    "i like you",
    "welcome <3",
    "let's drink a beer together mate!",
];

let store = null;

class Store {
    @observable helloMessage = '';

    constructor() {
        this.helloMessage = messages[Math.floor(Math.random() * (messages.length - 1))];
    }

    @action start = () => {
        this.timer = setInterval(() => {
            this.helloMessage = messages[Math.floor(Math.random() * (messages.length - 1))];
        }, 10000);
    }

    stop = () => clearInterval(this.timer)
}

export default function initStore() {
  return new Store();
}

pages_index.js

export default class HomePage extends Component {
    constructor (props) {
        super(props);
        this.store = initBaseStore();
    }

    render(){
        return (
            <Provider BaseStore={this.store}>
                <FriendlyHello />
            </Provider>
        )
    }
}

ui_friendly-hello.js

@inject('BaseStore') @observer
export default class FriendlyHello extends Component {

    componentDidMount () {
        this.props.BaseStore.start()
    }

    componentWillUnmount () {
        this.props.BaseStore.stop()
    }

    render () {
        return (
            <div>
                {this.props.BaseStore.helloMessage}
            </div>
        )
    }
}