diff --git a/examples/nextjs/pages/_app.js b/examples/nextjs/pages/_app.js
new file mode 100644
index 00000000000000..2ed955dde6d8fc
--- /dev/null
+++ b/examples/nextjs/pages/_app.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import App, { Container } from 'next/app';
+import { MuiThemeProvider } from '@material-ui/core/styles';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import JssProvider from 'react-jss/lib/JssProvider';
+import getPageContext from '../src/getPageContext';
+
+class MyApp extends App {
+ constructor(props) {
+ super(props);
+ this.pageContext = getPageContext();
+ }
+
+ pageContext = null;
+
+ componentDidMount() {
+ // Remove the server-side injected CSS.
+ const jssStyles = document.querySelector('#jss-server-side');
+ if (jssStyles && jssStyles.parentNode) {
+ jssStyles.parentNode.removeChild(jssStyles);
+ }
+ }
+
+ render() {
+ const { Component, pageProps } = this.props;
+ return (
+
+ {/* Wrap every page in Jss and Theme providers */}
+
+ {/* MuiThemeProvider makes the theme available down the React
+ tree thanks to React context. */}
+
+ {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+
+ {/* Pass pageContext to the _document though the renderPage enhancer
+ to render collected styles on server side. */}
+
+
+
+
+ );
+ }
+}
+
+export default MyApp;
diff --git a/examples/nextjs/pages/_document.js b/examples/nextjs/pages/_document.js
index 26203616889abc..a0c3cbb9af20b4 100644
--- a/examples/nextjs/pages/_document.js
+++ b/examples/nextjs/pages/_document.js
@@ -1,8 +1,7 @@
import React from 'react';
+import PropTypes from 'prop-types';
import Document, { Head, Main, NextScript } from 'next/document';
-import JssProvider from 'react-jss/lib/JssProvider';
import flush from 'styled-jsx/server';
-import getPageContext from '../src/getPageContext';
class MyDocument extends Document {
render() {
@@ -41,34 +40,44 @@ MyDocument.getInitialProps = ctx => {
// Resolution order
//
// On the server:
- // 1. page.getInitialProps
- // 2. document.getInitialProps
- // 3. page.render
- // 4. document.render
+ // 1. app.getInitialProps
+ // 2. page.getInitialProps
+ // 3. document.getInitialProps
+ // 4. app.render
+ // 5. page.render
+ // 6. document.render
//
// On the server with error:
- // 2. document.getInitialProps
+ // 1. document.getInitialProps
+ // 2. app.render
// 3. page.render
// 4. document.render
//
// On the client
- // 1. page.getInitialProps
- // 3. page.render
+ // 1. app.getInitialProps
+ // 2. page.getInitialProps
+ // 3. app.render
+ // 4. page.render
+
+ // Render app and page and get the context of the page with collected side effects.
+ let pageContext;
+ const page = ctx.renderPage(Component => {
+ const WrappedComponent = props => {
+ pageContext = props.pageContext;
+ return ;
+ };
+
+ WrappedComponent.propTypes = {
+ pageContext: PropTypes.object.isRequired,
+ };
- // Get the context of the page to collected side effects.
- const pageContext = getPageContext();
- const page = ctx.renderPage(Component => props => (
-
-
-
- ));
+ return WrappedComponent;
+ });
return {
...page,
pageContext,
+ // Styles fragment is rendered after the app and page rendering finish.
styles: (