feat: support next.js out-of-the-box

[sebastianvitterso]

Is your feature request related to a problem? Please describe.

Currently, using the library in a Next.js-application is a bit of a hassle. In short, it simply does not allow them. There are workarounds, and generally they still require users to put the styled components inside "use client" components.

A dear friend of ours, however, recommended a solution like this:

"use client"
import styled from 'styled-components'
import { Button as EdsButton } from '@equinor/eds-core-react'

export Button as styled(EdsButton)``

In their project, that worked well.

We experimented further with this, and found that this works just as well:

"use client"
export { Button } from '@equinor/eds-core-react'

Further experimentation found that we could also just do:

"use client"
export * from '@equinor/eds-core-react'

Which let us just import EDS components from this file instead of directly from @equinor/eds-core-react.

I've made PR #3701 to solve this exact issue. However, because npm run build runs rollup before this is published as an npm package, all directives are stripped away, so the "use client" addition is removed in the js bundle.

A simple fix to this is to use Ephem/rollup-plugin-preserve-directives, (found here), which seems to be an alright rollup-plugin for keeping directives in the bundles.

Describe the solution you'd like

"use client" at the top of index.js in the bundle.

This requires:

1. "use client" at the top of index.ts in the repo.
2. Rollup-plugin for keeping directives in bundled code.

Describe alternatives you've considered

No others, I suppose.

Additional context

A reddit thread shortly describing nextjs, SSR and styled-components.