Styled-components-website: Upgrade to Next@4 with React@16

[morajabi]

[ishankbahl]

@mxstbr I would like to work on this one.

[mxstbr]

Do it!

[vtserman]

Oh, I was going to work on this 'good first issue'.
But anyway, I've done some initial investigation today.
Since Next.js 4 requires React 16:

• You will not be able to use preact-compat in production mode any more.
• You will need to upgrade Enzyme to v3 and update snapshots for the tests to pass.

[ishankbahl]

@vtserman What changes are to be made for the preact-compat issue?
Saw your comment after making the PR. Though upgraded Enzyme and updated snapshots.

[vtserman]

Current version uses Preact for the production where it gives better performance, but since you upgraded to Next@4 with React@16 you will get an error "Error: Next.js 4 requires React 16." when trying to start application in production mode (npm build & npm start).
Use next.config.js to customize webpack config to turn off support of preact-compat.

Here is the code fragment from Next.js that blocks application startup.

import reactPkg from 'react/package'

// TODO: Remove this in Next.js 5
if (!(/^16\./.test(reactPkg.version))) {
  const message = `
Error: Next.js 4 requires React 16.
Install React 16 with:
  npm remove react react-dom
  npm install --save react@16 react-dom@16
`
  console.error(message)
  process.exit(1)
}

[kitten]

@ishankbahl let's wait until Next provides support for preact again. We wouldn't gain anything from upgrading to React 16 right now, and Streamed SSR is not interesting for us anyway, as all SSR routes are cached.

[imbhargav5]

Upgraded to Next@7 and React@16