Props not being passed when using custom document for styled components

Question

I'm trying to use styled components with next.js. I've added the babel plugin and added a custom _document.js. That all seems to be working fine.

However, when I try and use isomorphic-unfetch to getInitialProps into the page, the request returns data, but it doesn't make it into Props.

For _document.js I'm using the code from the next.js site here and have also tried a slightly different version from here which I also saw on the next.js docs site at some point.

My test page looks like this (also from the next.js docs):

import styled from 'styled-components';
import fetch from 'isomorphic-unfetch';

export default class MyPage extends React.Component {
    static async getInitialProps({ req }) {
        const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
        return { userAgent }
    }

    render() {

            return (
                <div>
                  Hello World {this.props.userAgent}
                </div>
              )
    }
}

I also have an _app.js that looks like this:

import App, { Container } from 'next/app';
import Page from '../components/Page';

class MyApp extends App {
  render() {
    const { Component } = this.props;

    return (
      <Container>
        <Page>
          <Component />
        </Page>
      </Container>
    );
  }
}

export default MyApp;

And Page.js just has some styled components and a theme with a component that looks like this:

class Page extends Component {
    render() {
        return (
            <ThemeProvider theme={theme}>
                <StyledPage>
                    <GlobalStyle />
                    <Meta />
                    <Header />
                    {this.props.children}
                </StyledPage>
            </ThemeProvider>
        );
    }
}

export default Page;

I feel like it's something to do with the new _document.js or _app.js not passing the props down somehow.

Clearly I'm pretty new to next.js, so apologies if it's something stupid. In the meantime, I'll keep plugging away to get a better understanding of what's going on. I wanted to ask in parallel here since I'm under some time pressure for this project.

Many thanks for any thoughts you might have.

You can try adding <Page {...this.props}> in App.js to pass down the props from App.js to Page.js — souravb
Yes, you're absolutely spot on. I spent far too long looking at _document.js instead of _app.js. Thanks for your response. — Darren

Darren Darren · Accepted Answer · 2019-02-26T08:14:47

Not long after posting, I worked out the issue. I guess posting on SO helps to understand the issue.

Essentially it was _app.js which was the problem, not _document.js as I had initially expected.

I needed to add pageProps to _app.js so that they were propagated down to the page:

import App, { Container } from 'next/app';
import Page from '../components/Page';

class MyApp extends App {

  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }
    return { pageProps };
  }

  render() {
    const { Component, pageProps } = this.props;

    return (
      <Container>
        <Page>
          <Component {...pageProps} />
        </Page>
      </Container>
    );
  }
}

export default MyApp;

Props not being passed when using custom document for styled components

1 Answers