dburles/_app.js

## _app.js
import { MysticalProvider } from 'mystical';
import PropTypes from 'prop-types';
import theme from '../lib/theme';

const App = ({ Component, pageProps, cache }) => {
  return (
    <MysticalProvider theme={theme} cache={cache}>
      <Component {...pageProps} />
    </MysticalProvider>
  );
};

App.propTypes = {
  Component: PropTypes.elementType.isRequired,
  pageProps: PropTypes.object,
  cache: PropTypes.object,
};

export default App;

## _document.js
import { createCache } from 'mystical';
import Document, { Head, Html, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const cache = createCache();
    const originalRenderPage = ctx.renderPage;

    ctx.renderPage = () => {
      return originalRenderPage({
        enhanceApp(App) {
          // eslint-disable-next-line react/display-name
          return (props) => {
            return <App {...props} cache={cache} />;
          };
        },
      });
    };

    const initialProps = await Document.getInitialProps(ctx);
    const { css, identifiers } = cache.getServerStyles();
    return { css, identifiers, ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head>
          <script id="__mystical__" data-identifiers={this.props.identifiers} />
          {this.props.css.map(({ id, rules }) => {
            return (
              <style key={id} dangerouslySetInnerHTML={{ __html: rules }} />
            );
          })}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;
	import { MysticalProvider } from 'mystical';
	import PropTypes from 'prop-types';
	import theme from '../lib/theme';

	const App = ({ Component, pageProps, cache }) => {
	return (
	<MysticalProvider theme={theme} cache={cache}>
	<Component {...pageProps} />
	</MysticalProvider>
	);
	};

	App.propTypes = {
	Component: PropTypes.elementType.isRequired,
	pageProps: PropTypes.object,
	cache: PropTypes.object,
	};

	export default App;
	import { createCache } from 'mystical';
	import Document, { Head, Html, Main, NextScript } from 'next/document';

	class MyDocument extends Document {
	static async getInitialProps(ctx) {
	const cache = createCache();
	const originalRenderPage = ctx.renderPage;

	ctx.renderPage = () => {
	return originalRenderPage({
	enhanceApp(App) {
	// eslint-disable-next-line react/display-name
	return (props) => {
	return <App {...props} cache={cache} />;
	};
	},
	});
	};

	const initialProps = await Document.getInitialProps(ctx);
	const { css, identifiers } = cache.getServerStyles();
	return { css, identifiers, ...initialProps };
	}

	render() {
	return (
	<Html>
	<Head>
	<script id="__mystical__" data-identifiers={this.props.identifiers} />
	{this.props.css.map(({ id, rules }) => {
	return (
	<style key={id} dangerouslySetInnerHTML={{ __html: rules }} />
	);
	})}
	</Head>
	<body>
	<Main />
	<NextScript />
	</body>
	</Html>
	);
	}
	}

	export default MyDocument;