Use Framework7 with Next.js

Questions
1

I’m trying to integrate Framework7 with Next.js.

Next.js runs on client and server side. Framework7 depends on window object, so I’m doing the following:

//execute only after component is mounted on client, this means window exists.
componentDidMount()
    {
        const routes = require('../routes');
        const F7 = require('framework7-react');
        Framework7.use(F7);

        this.setState(
            {
                F7,
                routes,
            }
        );
    }

Then in my render function:

render()
    {
        if (!this.state.routes) return <p>Loading</p>;

        const f7params = {
            id: 'io.framework7.testapp', // App bundle ID
            name: 'Framework7', // App name
            theme: 'auto', // Automatic theme detection
            routes: this.state.routes,
        };

        const { App, Statusbar } = this.state.F7;

        return (
            <App params={f7params}>
                <Statusbar />
            </App>
        );
    }

The result is a TypeError: Framework7 is not a constructor.

image
image.png901×857 134 KB

Am I doing something wrong? Is possible to initialize F7 after componentDidMount and use it?