kyle-mccarthy/_app.tsx Secret

## _app.tsx
import React from 'react';
import App, { Container } from 'next/app';
import Head from 'next/head';
import { withTheme } from '@material-ui/core/styles';

class MyApp extends App<any> {
  public static async getInitialProps({ Component, ctx }: any) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    return { pageProps }
  }

  render() {
    const { Component, pageProps, theme } = this.props;
    return (
      <Container>
        <Head>
          <title>My page</title>
        </Head>
        {/* Wrap every page in Styles and Theme providers */}
        <Component {...pageProps} theme={theme} />
      </Container>
    );
  }
}

export default withTheme(MyApp);

## _document.tsx
import Document, { Head, Main, NextScript } from 'next/document';
import React from 'react';
import flush from 'styled-jsx/server';
import getPageContext from '../src/getPageContext';
import { StylesProvider, ThemeProvider } from '@material-ui/styles';
import CssBaseline from '@material-ui/core/CssBaseline';

class MyDocument extends Document<{
  pageContext: any;
}> {
  public static getInitialProps = async (ctx: any) => {

    const pageContext = getPageContext();
    const originalRenderPage = ctx.renderPage;

    ctx.renderPage = () => originalRenderPage({
      enhanceApp: (App: React.ComponentType) => (props: any) => {
        return (
          <>
            <StylesProvider
              generateClassName={pageContext.generateClassName}
              sheetsRegistry={pageContext.sheetsRegistry}
              sheetsManager={pageContext.sheetsManager}
            >
              {/* ThemeProvider makes the theme available down the React
                tree thanks to React context. */}
              <ThemeProvider theme={pageContext.theme}>
                {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
                <CssBaseline />
                {/* Pass pageContext to the _document though the renderPage enhancer
                  to render collected styles on server side. */}
                <App {...props} pageContext={pageContext} />
              </ThemeProvider>
            </StylesProvider>

          </>
        )
      }
    });

    const initialProps = await Document.getInitialProps(ctx);
    (initialProps as any).pageContext = pageContext;

    return {
      ...initialProps,
      pageContext,
      styles: (
        <>
          <style
            id="jss-server-side"
            // eslint-disable-next-line react/no-danger
            dangerouslySetInnerHTML={{ __html: pageContext.sheetsRegistry.toString() }}
          />
          {flush() || null}
        </>
      ),
    };
  };

  public render() {
    return (
      <html lang="en" dir="ltr">
        <Head>
          <meta charSet="utf-8" />
          <meta
            name="viewport"
            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
          />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

export default MyDocument;
	import React from 'react';
	import App, { Container } from 'next/app';
	import Head from 'next/head';
	import { withTheme } from '@material-ui/core/styles';

	class MyApp extends App<any> {
	public static async getInitialProps({ Component, ctx }: any) {
	let pageProps = {}

	if (Component.getInitialProps) {
	pageProps = await Component.getInitialProps(ctx)
	}

	return { pageProps }
	}

	render() {
	const { Component, pageProps, theme } = this.props;
	return (
	<Container>
	<Head>
	<title>My page</title>
	</Head>
	{/* Wrap every page in Styles and Theme providers */}
	<Component {...pageProps} theme={theme} />
	</Container>
	);
	}
	}

	export default withTheme(MyApp);
	import Document, { Head, Main, NextScript } from 'next/document';
	import React from 'react';
	import flush from 'styled-jsx/server';
	import getPageContext from '../src/getPageContext';
	import { StylesProvider, ThemeProvider } from '@material-ui/styles';
	import CssBaseline from '@material-ui/core/CssBaseline';

	class MyDocument extends Document<{
	pageContext: any;
	}> {
	public static getInitialProps = async (ctx: any) => {

	const pageContext = getPageContext();
	const originalRenderPage = ctx.renderPage;

	ctx.renderPage = () => originalRenderPage({
	enhanceApp: (App: React.ComponentType) => (props: any) => {
	return (
	<>
	<StylesProvider
	generateClassName={pageContext.generateClassName}
	sheetsRegistry={pageContext.sheetsRegistry}
	sheetsManager={pageContext.sheetsManager}
	>
	{/* ThemeProvider makes the theme available down the React
	tree thanks to React context. */}
	<ThemeProvider theme={pageContext.theme}>
	{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
	<CssBaseline />
	{/* Pass pageContext to the _document though the renderPage enhancer
	to render collected styles on server side. */}
	<App {...props} pageContext={pageContext} />
	</ThemeProvider>
	</StylesProvider>

	</>
	)
	}
	});

	const initialProps = await Document.getInitialProps(ctx);
	(initialProps as any).pageContext = pageContext;

	return {
	...initialProps,
	pageContext,
	styles: (
	<>
	<style
	id="jss-server-side"
	// eslint-disable-next-line react/no-danger
	dangerouslySetInnerHTML={{ __html: pageContext.sheetsRegistry.toString() }}
	/>
	{flush() \|\| null}
	</>
	),
	};
	};

	public render() {
	return (
	<html lang="en" dir="ltr">
	<Head>
	<meta charSet="utf-8" />
	<meta
	name="viewport"
	content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
	/>
	<link
	rel="stylesheet"
	href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
	/>
	</Head>
	<body>
	<Main />
	<NextScript />
	</body>
	</html>
	);
	}
	}

	export default MyDocument;