Improve NextJS example with new _app.js

[growak]

NextJs has released a canary version providing a new way to extend the main application (_app.js). Material UI settings should be configured in this file with a higher order component.
Here is a Redux integration example using the _app.js file.

Your Environment

Tech	Version
Material-UI	1.0.0-beta.43
React	16.3.13
Next	6.0.0-canary.7

[oliviertassinari]

@growak Thanks for the heads-up. Indeed, it's documented in https://github.com/zeit/next.js#custom-app.

[growak]

@oliviertassinari thank you for the quick feedback.
I have tried to use a custom app but a strange behavior occurred.
The ruleCounter is increasing indefinitely on the server side.
I will prepare a clean sample project to find the issue.
If you plan to use the nextjs 6 and custom app let me know.

[Tapppi]

Played around with _app.js and mui today and hit this as well. After some digging I found the root cause. A fix is proposed in vercel/next.js#4288. You can run my branch or apply the hotfix to your node_modules or whatever until this is fixed upstream.

Background/reasoning:

I had an inkling that App isn't getting the correct props or wasn't sharing state with document as normal components. The most likely reason seemed that it isn't called through the enhancer passed to renderPage in _document.js like normal pages, and as such it doesn't get the correct pageContext prop and ends up creating a new one with different class names.

[landerton]

I ran into problems here as well. Specifically, when using _app.js to create a persistent layout. My layout contains its own set of material-ui components that require theme and custom jss. The current example wraps individual pages with withRoot, but when using _app.js the pages are nested beneath the layout. I'm unsure the best way to provide theme and jss to my persistent layout.

import React from 'react'
import {Provider} from 'react-redux'
import App, {Container} from 'next/app'
import withRedux from 'next-redux-wrapper'
import initStore from '../utils/store'
import Layout from '../components/layout'

export default withRedux(initStore)(class MyApp extends App {

  static async getInitialProps({Component, ctx}) {
    return {
      pageProps: {
        // Call page-level getInitialProps
        ...(Component.getInitialProps ? await Component.getInitialProps(ctx) : {}),
      }
    };
  }

  render() {
    const {Component, pageProps, store} = this.props;

    return (
      <Container>
        <Provider store={store}>
          <Layout>
            <Component {...pageProps} />
          </Layout>
        </Provider>
      </Container>
    );
  }

});

[mheras]

Hi there.

Is there any update on this?
I'm trying to have a persistent layout with _app.js, which works well on the client, but when I refresh the page, SSR does not work... It does not apply the theme/styles. I don't know how to fix it.

[oliviertassinari]

@mheras I believe you can't use the _app.js pattern to render any Material-UI component until vercel/next.js#4288 move forward.

[landerton]

An example of how to wrap the Component in a persitent layout is still missing. My attempts to create a common Material-UI layout have been unsuccessful:

Warning: Prop className did not match. Server:

Seems there needs to be a way to have persistent style elements that map to the common header, footer, etc.

[oliviertassinari]

@landerton Our next.js demo now demonstrates how to do that. The "persitent layout" in the demo is simply the CssBaseline component.

[landerton]

Ahhh okay. Thank you.

Got it working by wrapping my persistent layout style classes with @global. Then using the className string literals instead of their variable names.

https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/CssBaseline/CssBaseline.js#L9