[Meta] Next.js support

This Meta issue tracks the status of support for Next.js by EUI and helps answer a commonly answered question. This issue should capture the gaps that currently prevent us from providing support

## Related

SSR Support: https://github.com/elastic/eui/issues/5419

## State of current support

**EUI does not [currently support Next.js](https://eui.elastic.co/docs/getting-started/setup/#supported-environments)**. While most EUI components are SSR-compatible, modern Next.js features like the App Router and Server Components don't work well with EUI and require workarounds. We don't recommend using EUI with Next.js in production or consumer-facing deployments.

### EUI and Server-Side Rendering

EUI components have supported server-side rendering for various internal and external projects for a few years now. Our codebase is 99% free of logic that would crash in non-browser environments, and we have made many improvements over the years to make the experience better.

That being said, SSR support was never our top priority, and there are issues you should expect when using EUI this way:

1. There's no way to use EUI components without client-side JS. EUI is a client-side first component library
2. Client- and server- side renders may differ, leading to hydration errors
3. `EuiIcon` doesn't render in SSR

### EUI and Next.js

We treat Next.js as a superset of the classic server-side rendering due to the numerous features it provides that dramatically change the way you develop apps.

Similarly to SSR from the section above, EUI never provided official support for Next.js. EUI components render mostly as expected in the Next.js server environment; however, they require workarounds to function as expected.

The primary issue is the [unstable support](https://github.com/emotion-js/emotion/issues/2928) for [Emotion](https://emotion.sh/) - our CSS-in-JS library. There's a workaround that uses `useServerInsertedHTML` to inject styles extracted from Emotion cache, which you can find below.

EUI is a client-side component library. You must render EUI components from [client components](https://nextjs.org/docs/14/app/building-your-application/rendering/client-components) since our components don't come with the `"use client"` directive. Direct rendering of EUI components from server components is not supported.

## Notes

We do have a [starter project](https://github.com/elastic/next-eui-starter), but it is very out of date. We have an [issue](https://github.com/elastic/eui/issues/8336) created to add an example/boilerplate of Emotion and EUI to Next.js repository.