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.

[oddvernes]

For reference, @sebastianvitterso found this article explaining the issue at hand. So to fully support ssr we would need to either change to the pattern descibed in this article (big breaking change) or make the subcomponents available for import individually (maybe ideally imported from a sub-path and not root directly to avoid chaos)

[sebastianvitterso]

Another related issue (under the header of this issue at least), is the useId's non-deterministic nature.

Error screenshot

We discussed this previously, @oddvernes , but a short recap is available in these next.js-docs.

[oddvernes]

The useId issue was fixed by your changes I think? (once we release it)

[sebastianvitterso]

You're right, I just lost sight of that issue!
For posterity, it was PR #3706