Persistent layout with multiple layer

examples/persistent-layout/components/AppLayout.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export default class AppLayout extends React.Component {
+  render () {
+    return (
+      <div>
+        <h1>App header</h1>
+        {this.props.children}
+      </div>
+    )
+  }
+}

examples/persistent-layout/components/ContentLayout.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import AppLayout from './AppLayout'
+
+export default class ContentLayout extends React.Component {
+  static parentLayout = AppLayout
+
+  render () {
+    return (
+      <div>
+        <hr />
+        {this.props.children}
+        <hr />
+      </div>
+    )
+  }
+}

examples/persistent-layout/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "persistent-layout",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  },
+  "license": "ISC"
+}

examples/persistent-layout/pages/about.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import ContentLayout from '../components/ContentLayout'
+
+export default class AboutPage extends React.Component {
+  static layout = ContentLayout
+
+  render () {
+    return (
+      <p>about</p>
+    )
+  }
+}

examples/persistent-layout/pages/index.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import Link from 'next/link'
+import AppLayout from '../components/AppLayout'
+
+export default class IndexPage extends React.Component {
+  static layout = AppLayout
+
+  render () {
+    return (
+      <div>
+        index
+        <Link href='/about'>
+          <a>about</a>
+        </Link>
+      </div>
+    )
+  }
+}

lib/app.js

@@ -70,11 +70,35 @@ class Container extends Component {
     return !shallowEquals(this.props, nextProps)
   }
 
-  render () {
+  renderLayout (layouts) {
     const { Component, props, url } = this.props
+    const Layout = layouts.pop()
+    return (Layout) ? (
+      <Layout pageProps={props} url={url}>
+        {this.renderLayout(layouts)}
+      </Layout>
+    ) : (
+      <Component {...props} url={url} />
+    )
+  }
 
+  renderPageComponent () {
+    const { Component, props, url } = this.props
+
+    if (typeof Component.layout === 'function') {
+      const layouts = [Component.layout]
+      while (typeof layouts[layouts.length - 1].parentLayout === 'function') {
+        layouts.push(layouts[layouts.length - 1].parentLayout)
+      }
+      return this.renderLayout(layouts)
+    }
+
+    return <Component {...props} url={url} />
+  }
+
+  render () {
     if (process.env.NODE_ENV === 'production') {
-      return (<Component {...props} url={url} />)
+      return this.renderPageComponent()
     } else {
       const ErrorDebug = require('./error-debug').default
       const { AppContainer } = require('react-hot-loader')
@@ -83,7 +107,7 @@ class Container extends Component {
       // https://github.com/gaearon/react-hot-loader/issues/442
       return (
         <AppContainer warnings={false} errorReporter={ErrorDebug}>
-          <Component {...props} url={url} />
+          {this.renderPageComponent()}
         </AppContainer>
       )
     }