Styled-components FOUC with nextjs and typescript

[scottdj92]

Bug report

Describe the bug

Hi, there seems to be FOUC when attempting to render styled components server-side.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to https://github.com/scottdj92/next-styled-components-fouc
2. Clone, install, run npm run dev with the dev tools open
3. See that the index route doesn't render styles server side
4. Further inspection (console logging) of _document.tsx's styleTags prop returns undefined

Expected behavior

I expected style tags to be rendered server side with TS. I ran the same repo without TS, and it behaved as expected.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: OS X
• Browser (if applies) FF Quantum & Chrome 67
• Version of Next.js: ^6.1.1

Screenshot

Additional Questions

Would this be solved by moving this to _app.js? I don't see anything in the docs that say so. If the examples need to be updated, I'd be willing to do that :)

[brainkim]

Ran into this myself. getInitialProps in your example should be static or it won’t run. Maybe next.js could emit a warning when getInitialProps is defined non-statically?

[scottdj92]

Ooo that's a nice catch, I didn't see that.

EDIT: yep, adding static to the getInitialProps declaration fixes my issue in the example repo. We should add a warning in the CLI that notifies the developer if getInitialProps is defined non-statically like @brainkim mentioned.