import React from 'react'
export default class Error extends React.Component {
  static getInitialProps ({ res, err }) {
    const statusCode = res ? res.statusCode : err ? err.statusCode : null
    return { statusCode }
  }
  static isErrorPage = true
  render () {
    return (
      <h1>
        {this.props.statusCode
          ? `An error ${this.props.statusCode} occurred on server`
          : 'An error occurred on client'}
      </h1>
    )
  }
}

import App, { Container } from 'next/app'
import Layout from 'components/Layout'
export default class MyApp extends App {
  static async getInitialProps ({ Component, router, ctx }) {
    let pageProps = {}
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }
    return { pageProps }
  }
  render () {
    const { Component, pageProps } = this.props
    return (
      Component.isErrorPage
        ? (
          <Container>
            <Component {...pageProps} />
          </Container>
        )
        : (
          <Container>
            <Layout>
              <Component {...pageProps} />
            </Layout>
          </Container>
        )
    )
  }
}

<Container>
  <Component.Layout>
    <Component { ...pageProps} />
  </Component.Layout>
</Container>

const MyPage = () => <div></div>
MyPage.Layout = MyLayout;
MyPage.getInitialProps = async () => ({});
export default MyPage;

type LayoutComponent = NextComponentType<NextPageContext, any, any> & {
  Layout?: any;
};
interface Props extends AppProps {
  Component: LayoutComponent;
}