Plans to support Next.js 13 - /app directory

[fcisio]

The problem

Next JS just release their v13 publicly. As seen in their docs, emotion has not yet added support.

Is there any plan to add support in the near future?

Thanks.

[francoisjacques]

Thank you @tom-streller-tutti! Is your minimal experiment something that can be shared for other to look at? It could be useful to create a "safe" boilerplate for others to use... for those who can't consider using a different styling engine than emotion for various reason.

[tihuan]

Following this thread, since our stack is also Next.js + Emotion + MUI and currently migrating from Next.js 12 to 14

I just tried adding /* @jsxImportSource react */ to src/app/layout.tsx per https://github.com/emotion-js/emotion/issues/2928#issuecomment-1888848189, and somehow still getting You have illegal escape sequence in your template literal, most likely inside content's property value. I was hoping adding /* @jsxImportSource react */ would get rid of that error, but maybe it's not related 😆

[LuisGilGB]

For people trying to make the Next + Emotion + MUI combination work in Next 14, have you tried with next@14.0.1? As far as I could see when I did a migration from v13 to v14, v14.0.2 brought some changes in the way modules are resolved which made builds no possible at all because of how some dependencies were exported; but with v14.0.1 everything worked ok. Not the latest version (v14.0.4 currently); but I guess it's enough for most migration purposes.

[francoisjacques]

Following this thread, since our stack is also Next.js + Emotion + MUI and currently migrating from Next.js 12 to 14

I just tried adding /* @jsxImportSource react */ to src/app/layout.tsx per #2928 (comment), and somehow still getting You have illegal escape sequence in your template literal, most likely inside content's property value. I was hoping adding /* @jsxImportSource react */ would get rid of that error, but maybe it's not related 😆

Do you get it even when you disable turbo?

[siriwatknp]

Anybody from MUI or community working on an updated version of the next/mui example? https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts We still need a separate client flle (with "use client") where ThemeProvider/CssBaseline is defined, right?

MUI Next.js examples are now using the integration package, see https://github.com/mui/material-ui/pull/40199.

[tom-streller-tutti]

Thank you @tom-streller-tutti! Is your minimal experiment something that can be shared for other to look at? It could be useful to create a "safe" boilerplate for others to use... for those who can't consider using a different styling engine than emotion for various reason.

@francoisjacques I have create a public Repo with the minimal version I used: https://github.com/tom-streller-tutti/minimal-nx-nextjs-emotion-mui

It's not exactly minimal, as it also contains nx as a build tool. I also wrote about what I found out and other things in the README. I hope it helps.

[denu5]

@tom-streller-tutti fyi: what you mention in your rant readme is kind of what mui did a while ago on all components they export.

ps. das logo kenn ich, gruess us züri :)

https://github.com/mui/material-ui/commit/a4afa9ff2442589deb73a4b08c299913983967bd#diff-404207b76c551306dc4629e283a6483cd30cff95b811d3bd57147b5fabca3b79

[oliviertassinari]

As far as Material UI is concerned:

• Emotion is fully compatible with the Next.js App Directory, per https://github.com/emotion-js/emotion/issues/2928#issuecomment-1891248190. There might be bugs to fix still, but I haven't seen them in practice yet: https://github.com/reactwg/react-18/discussions/110.
• Now, the next problem to solve is RSC: #2978.

[Andarist]

React 19 - to the best of my knowledge - is meant to allow using runtime CSS-in-JS libs in RSC. I'm playing with their Float APIs and it looks promising.

[bexoss]

The truth is it's not working well. I am keeping nextjs version to 12 because of this issues. I should have choose tailwind

[dzek69]

@bexoss you can use v13, just don't use app router but pages router. It's safer to be on the newer version probably:)

[oliviertassinari]

The truth is it's not working well. I am keeping nextjs version to 12 because of this issues.

@bexoss What issue did you experience?

[mandymozart]

This is so sad. React moving to ssr and no serious support for real css encapsulation. And tailwind is so much going the very wrong direction. I love css and I hate the tailwind abstractions.

I actually really consider going back to global css style bundles or post css imports. For a graphic background person like me this is such a drag. Other frameworks like angular and web components have made much better moves keeping some sort of real encapsulation possible as suggested by W3C

[denu5]

@mandymozart

there are plenty of new css in js solutions

https://griffel.js.org https://linaria.dev

https://mui.com/blog/introducing-pigment-css/

[garronej]

there are plenty of new css in js solutions

Yeah, but all those solutions that implement static extraction constitute a massive downgrade in DX and expressiveness compared to dynamic styles.

Being able to define your styles based on the component states, props, and ambient theme is very powerful.

I mean, sure, a solutions like Griffel and tss-react does look the same on the surface, but Griffel comes with serious limitations that tss-react or Emotion does not have.

[mandymozart]

@denu5 thanks for the hints. I was researching a little and since I usually am super sceptical when switching tech, none of the things I found convinced me. Linaria looks fun, because I can almost write css as it is supposed to.

@garronej Mui I was always a bit sceptical because it comes with its own components and my experience in some corporate large scale projects was that component libraries after some time all deteriorate, and since I am a UI designer by nature usually have to be modes to a extend that makes the underlying components ugly mutants wrapped in abstractions.

But hey, emotions was also just a work around for something I was so used to from dart and polymer and webcomponents and even angular. Actual shadow and shady dom :-)

I like that you mention expressiveness and the lack thereof. Yes, I think css is a super expressive language and it's poetry. I do this for 25 years since I was a teenager and it's my way of describing the world. It's even more my language than English. It's part of my dna. So perhapse I am biased haha but it is hard enough to change my grammar every 6 months in the web anyhow. (Insert Frontend dev laugh)

[1NF053C]

Does Next.js 14.2.5 support the css property with @emotion/react ?

Do we need to follow these steps to enable it: https://nextjs.org/docs/app/building-your-application/styling/css-in-js#configuring-css-in-js-in-app ?

Does anyone have an example of doing so?

By default it does not seem supported, even with jsx pragma at top of file:

/** @jsx jsx */
import { jsx } from '@emotion/react';

Type '{ children: Element; css: { position: string; width: number; height: number; '[data-name=bg]': { color: string; }; '[data-name=line]': { color: string; }; }; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Property 'css' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

Thank you.

[juliangorge]

Hi! Is there any news about this topic?