_app.js

/* imports */

const PageWrapper = Comp =>
  class extends React.Component {
    /*
     * We need to use args.ctx here instead of args
     * See https://github.com/zeit/next.js#custom-document
     */
    static async getInitialProps(args) {
      return {
        ua: args.ctx.req
          ? args.ctx.req.headers['user-agent']
          : navigator.userAgent,
        ...(Comp.getInitialProps ? await Comp.getInitialProps(args) : null),
      }
    }

    render() {
      const {ua, ...props} = this.props
      return (
        <UserAgentProvider ua={ua}>
          <Comp {...props} />
        </UserAgentProvider>
      )
    }
}

class MyApp extends App {
  render() {
    const {Component, pageProps} = this.props
    return (
      <Container>
        <Page>
          <Component {...pageProps} />
        </Page>
      </Container>
    )
  }
}

// use the PageWrapper only once!
export default PageWrapper(MyApp)