Support for Next.js 13 #1109

hmbrg · 2022-10-26T12:12:27Z

Since Next.js 13 was released yesterday, the beta docs list Stitches as not being support as of right now.

There is however a guide on how to integrate styled-jsx that look very similar to how Stitches could be integrated: https://beta.nextjs.org/docs/styling/css-in-js

Are there any plans to officially offer support for Next.js 13?

The text was updated successfully, but these errors were encountered:

jpmaga · 2022-11-07T09:20:11Z

I barely tested this, but seems to be working. Again, I tested this for like 2 mins, so take that into consideration. Based on the example:

"use client"

import React from "react"
import { useServerInsertedHTML } from "next/navigation"
import { getCssText } from "../../stitches.config"

export function ServerStylesheet({ children }) {
  useServerInsertedHTML(() => {
    return <style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />
  })

  return children
}

and on the layout:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </head>
      <body>
        <ServerStylesheet>{children}</ServerStylesheet>
      </body>
    </html>
  )
}

darklight9811 · 2022-11-07T10:41:17Z

@jpmaga css utility method breaks the app (both on client and server). And stitches should update the docs for next 13 app dir. Because its a totally different way of doing things than the pages directory

rodrigodh · 2022-11-18T12:53:07Z

It seems to only work with client-side rendering, is it right?

vitharanagedonjani-i2e · 2022-11-18T17:50:36Z

@rodrigodh yes

rodrigodh · 2022-11-18T21:01:27Z

Is there any way for making the app awaits for css before loads?

darklight9811 · 2022-11-19T00:16:08Z

@rodrigodh you need to force the prop into a string, then it works, this is actually a bug on react dom server, need to post an issue about this there.

I noticed that sometimes the style dont load at all too.

rodrigodh · 2022-11-19T00:26:52Z

@rodrigodh you need to force the prop into a string, then it works, this is actually a bug on react dom server, need to post an issue about this there.

I noticed that sometimes the style dont load at all too.

'use client';

import { useServerInsertedHTML } from 'next/navigation';
import { getCssText } from './stitches.config';

export function ServerStylesheet({
  children,
}: {
  children: JSX.Element;
}): JSX.Element {
  useServerInsertedHTML(() => {
    return (
      <style
        id="stitches"
        dangerouslySetInnerHTML={{ __html: String(getCssText()) }}
      />
    );
  });

  return children;
}

Tried this but did not work, is it another prop?

vitharanagedonjani-i2e · 2022-11-20T21:25:30Z

@rodrigodh getCssText() returns a string @darklight9811 could you elaborate?

darklight9811 · 2022-11-20T21:29:49Z

@rodrigodh @vitharanagedonjani-i2e, sorry for the delay, but I meant the css utility, not the getCssText(), another part of the issue.

const buttonProps = css({})

function Button (props) {
  return <button className={buttonProps(props)}>{props.children}</button>
}

vitharanagedonjani-i2e · 2022-11-21T08:15:59Z

Does this fix the issue where styles are not loading in server side? @darklight9811

rodrigodh · 2022-11-23T13:27:33Z

Does this fix the issue where styles are not loading in server side? @darklight9811

Absolutely not

gabriel-mend · 2022-12-05T22:25:07Z

This link shows how it worked for me, but only on the client side.
https://stackblitz.com/edit/nextjs-ftij4p?file=app/ServerStylesSheet.tsx

But all pages and components you need to use with stitches, you put this flag on top the code 'use client'. This specify the component or page is run on client side.

jvgomg · 2022-12-31T14:04:39Z

I‘d love to see support for this too.

I don't 100% understand the issue but I suspect getCssText is too magical and something like a StyleSheet API needs to be exposed.

b2rsp · 2023-01-03T12:46:40Z

I am also on the need for a migration for Nextjs 13 and i would the support for this as well!

DavidRojas1612 · 2023-01-19T23:23:39Z

This works for me, inside of the Layout.tsx file generated in the app directory folder, but i dont sure.

import {getCssText, globalStyles} from '@/ui'
import './globals.css'

export default function RootLayout({children}: {children: React.ReactNode}) {
  globalStyles()
  return (
    <html lang="en">
      <head>
        <style id="stitches" dangerouslySetInnerHTML={{__html: getCssText()}} />
      </head>
      <body>{children}</body>
    </html>
  )
}

timweightman · 2023-01-27T09:17:36Z

@DavidRojas1612 That's great! Seems extremely simple, thanks for commenting to let us know.
Have you noticed any gaps or issues since last week?

jbowa · 2023-01-27T09:19:42Z

@DavidRojas1612 @timweightman The above seems to work albeit I am seeing a few errors:

thomas-negrault · 2023-01-29T13:59:33Z

This works for me, inside of the Layout.tsx file generated in the app directory folder, but i dont sure.

@DavidRojas1612 Does this work for you with fast refresh ? It does work on my side but if I do a change, the app refresh without stitches style and I have to manually refresh to get the style back.

timweightman · 2023-01-29T22:54:18Z

@DavidRojas1612 @timweightman The above seems to work albeit I am seeing a few errors:

I am not certain why you're getting this error - the content of your RootLayout component should match @DavidRojas1612 example exactly. Is there anything you've done differently, maybe show us some code?

@DavidRojas1612 Does this work for you with fast refresh ? It does work on my side but if I do a change, the app refresh without stitches style and I have to manually refresh to get the style back.

I'm in the same boat - must manually refresh to get styles back. I believe the CSS generated and put into the <style id="stitches" element is being mangled. When I modify CSS for a Stitches styled component and compare the content of that style element, the whole block of styles for all components has been removed, only the global styles remain.

I wonder if it's related to NextJS Fast Refresh...?

hipstersmoothie · 2023-02-20T23:23:23Z

@timweightman I think getCSsText is broken in general on the client #1094

I too am only seeing the global styles in the output

hipstersmoothie · 2023-02-20T23:34:53Z

Ooo I just did a setTimeout to use getCssText and it has all the styles now. I'm thinking that if you call it too soon it doesn't work

jackguoAtJogg · 2023-02-20T23:38:22Z

Ooo I just did a setTimeout to use getCssText and it has all the styles now. I'm thinking that if you call it too soon it doesn't work

@hipstersmoothie What does your code looks like? I'd like to have it as a reference.

hipstersmoothie · 2023-02-20T23:39:04Z

ferreira029 · 2023-03-02T23:12:15Z

I solved this problem creating a isolated component, and applying the getCssText there for example:

MyComponent:

import { getCssText } from '@/styles/stitches.config'

export const StyleSheet = () => {
  return (
		<style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />
	)
}

layout.tsx

import { StyleSheet } from '@/components/StyleSheet'
import { GlobalCss } from '@/styles/global'

export default function RootLayout({
	children,
}: {
	children: React.ReactNode
}) {
	return (
		<html lang="en" className={inter.className}>
			<head>
				<StyleSheet />
			</head>
			<body>
				{children}
				{GlobalCss()}
			</body>
		</html>
	)
}

This way work because that in nextjs 13 all component are SSR (Server Side Rendering), then this stitche style is load on SSR and the screen already work with this style!

I hope that help everyone! Thank you guys!

wolffbruno · 2023-03-05T05:51:40Z

I solved this problem creating a isolated component, and applying the getCssText there for example:

MyComponent:
import { getCssText } from '@/styles/stitches.config'

export const StyleSheet = () => {
  return (
		<style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />
	)
}
layout.tsx
import { StyleSheet } from '@/components/StyleSheet'
import { GlobalCss } from '@/styles/global'

export default function RootLayout({
	children,
}: {
	children: React.ReactNode
}) {
	return (
		<html lang="en" className={inter.className}>
			<head>
				<StyleSheet />
			</head>
			<body>
				{children}
				{GlobalCss()}
			</body>
		</html>
	)
}
This way work because that in nextjs 13 all component are SSR (Server Side Rendering), then this stitche style is load on SSR and the screen already work with this style!

I hope that help everyone! Thank you guys!

For me, this solution works well, but fast refresh does not immediately work (the styles are not applied), requiring a manual refresh.

joneslloyd · 2023-03-23T17:01:11Z

I solved this problem creating a isolated component, and applying the getCssText there for example:

MyComponent:
import { getCssText } from '@/styles/stitches.config'

export const StyleSheet = () => {
  return (
		<style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />
	)
}
layout.tsx
import { StyleSheet } from '@/components/StyleSheet'
import { GlobalCss } from '@/styles/global'

export default function RootLayout({
	children,
}: {
	children: React.ReactNode
}) {
	return (
		<html lang="en" className={inter.className}>
			<head>
				<StyleSheet />
			</head>
			<body>
				{children}
				{GlobalCss()}
			</body>
		</html>
	)
}
This way work because that in nextjs 13 all component are SSR (Server Side Rendering), then this stitche style is load on SSR and the screen already work with this style!

I hope that help everyone! Thank you guys!

This worked for me only when it's an isolated component with no other functionality (ie, global styles in a separate file)

jbowa · 2023-03-24T08:49:13Z

The above solutions seem to be working for me too with:
stylesheets.tsx

export default function StyleSheet() {
	return (
		<style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />
	);
}

globalCSS.tsx

export default function GlobalCSS() {
	return globalStyles();
}

and

layouts.tsx

export default function RootLayout({ children }: Props) {
	return (
		<html lang="en" className={Graphik.className}>
			<head>
				<StyledSheet />
			</head>
			<body>
				<Providers>{children}</Providers>
				<Analytics />
				{GlobalCSS()}
			</body>
		</html>
	);
}

IvanKuzyshyn · 2023-03-24T09:36:17Z

@jbowa I'm wondering why {GlobalCSS()} goes as last body children and not the first?

jbowa · 2023-04-02T13:28:12Z

@IvanKuzyshyn Either way I am still having issues. As much as I hate it, I think the smart move here would be to move to TailwindCSS.

cassiocsantana · 2023-04-03T23:40:14Z

I've followed the steps to set up Stitches with Next.js 13, but I'm having issues with rehydration. Sometimes it works, sometimes it doesn't, and I have to do a manual refresh. Additionally, the styles are not being applied consistently and sometimes load without any styling before eventually applying the correct styles. Is there anything I can do to improve this? Any other tips or suggestions?

gutsyphilip · 2023-04-04T22:04:28Z

I've followed the steps to set up Stitches with Next.js 13, but I'm having issues with rehydration. Sometimes it works, sometimes it doesn't, and I have to do a manual refresh. Additionally, the styles are not being applied consistently and sometimes load without any styling before eventually applying the correct styles. Is there anything I can do to improve this? Any other tips or suggestions?

Having this issue as well. Had to revert to using the pages folder to avoid these issues.

ricardolandolt · 2023-04-05T10:51:05Z

Hi guys!

Based on these examples: https://beta.nextjs.org/docs/styling/css-in-js, this works for me:

app/registry.tsx

"use client";

import React, { useState } from "react";
import { useServerInsertedHTML } from "next/navigation";
import { getCssText } from "@/styles/styles.config";

export default function StitchesRegistry({ children }: { children: React.ReactNode }) {
  const [isRendered, setIsRendered] = useState(false);

  useServerInsertedHTML(() => {
    if (!isRendered) {
      setIsRendered(true);
      return <style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />;
    }
  });

  return <>{children}</>;
}

app/layout.tsx

import { Providers } from "./providers";
import StitchesRegistry from "./registry";

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <head />
      <body>
        <StitchesRegistry>
          <Providers>{children}</Providers>
        </StitchesRegistry>
      </body>
    </html>
  );
}

Hope to help someone! Cheers!

maxichrome · 2023-04-07T02:24:26Z

@ricardolandolt that registry does seem to make fast refresh work just fine in my (very limited) testing!

matt-hai · 2023-04-12T17:34:18Z

It should still be noted that only client components will get any styling by using the 'stitches registry' solution.

Server components do not get styling output. They will get a CSS class applied, but it won't be flushed within the generated style element content.

@ricardolandolt do server components get styling in your use-case?

MuLoo · 2024-01-25T12:10:56Z

Hi guys!

Based on these examples: https://beta.nextjs.org/docs/styling/css-in-js, this works for me:

app/registry.tsx

"use client";

import React, { useState } from "react";
import { useServerInsertedHTML } from "next/navigation";
import { getCssText } from "@/styles/styles.config";

export default function StitchesRegistry({ children }: { children: React.ReactNode }) {
  const [isRendered, setIsRendered] = useState(false);

  useServerInsertedHTML(() => {
    if (!isRendered) {
      setIsRendered(true);
      return <style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />;
    }
  });

  return <>{children}</>;
}

app/layout.tsx

import { Providers } from "./providers";
import StitchesRegistry from "./registry";

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <head />
      <body>
        <StitchesRegistry>
          <Providers>{children}</Providers>
        </StitchesRegistry>
      </body>
    </html>
  );
}

Hope to help someone! Cheers!

Hi, thank you for the solution you provided.
I am a beginner of NEXTJS, I have a doubt, if the registry is “use client”, then its subcomponents need to be rendered on the client side, does this affect the SEO of the entire application?
What is the best way to do it? For example, use other css solutions?

dzek69 · 2024-01-25T12:14:58Z

@MuLoo
"use client"; does NOT mean that component is rendered only in the browser. You can easily verify that, reload current url (f5), then press ctrl+U, that's the HTML sent by the server. (Adjust hotkeys if you are on Mac)

React Server Component and SSR are two different topics basically.

MuLoo · 2024-01-26T01:35:56Z

@MuLoo "use client"; does NOT mean that component is rendered only in the browser. You can easily verify that, reload current url (f5), then press ctrl+U, that's the HTML sent by the server. (Adjust hotkeys if you are on Mac)

React Server Component and SSR are two different topics basically.

Thank you buddy, I got it, Hope you have a nice day ! ❤️

lcberaldo · 2024-04-22T20:45:35Z

hey guys !

I'm still having the same problem reported in this thread.

The browser does the auto refresh, but without the styles. I need to manually update the page

Did anyone find a solution?

MuLoo · 2024-04-23T02:26:42Z

hey guys !

I'm still having the same problem reported in this thread.

The browser does the auto refresh, but without the styles. I need to manually update the page

Did anyone find a solution?

Stitches does not support styled function in server-side components, which means it can only be used in client-side components.
therefore, There are two sets of css methods for client components and server components. I've switched all to css modules. In this way, the css methods of server and client components are unified.
Basically no one has the energy to maintain stitches now, so it is recommended to replace it as soon as possible.

nickadamson mentioned this issue Oct 27, 2022

add support for next/image nickadamson/messonry#2

Open

sebald mentioned this issue Nov 14, 2022

Evaluate stiches.js to replace emotion and theme-ui marigold-ui/marigold#2153

Closed

drianoaz mentioned this issue Nov 23, 2022

[FR] Static Extraction #955

Closed

restareaByWeezy mentioned this issue Dec 8, 2022

not working from next.js 13 & need server side supports for next.js 13 #1127

Open

albertogasparin mentioned this issue May 2, 2023

Migrate from Glamor to Emotion actualbudget/actual#701

Closed

Support for Next.js 13 #1109

Support for Next.js 13 #1109

Comments

hmbrg commented Oct 26, 2022

jpmaga commented Nov 7, 2022

darklight9811 commented Nov 7, 2022

rodrigodh commented Nov 18, 2022

vitharanagedonjani-i2e commented Nov 18, 2022

rodrigodh commented Nov 18, 2022

darklight9811 commented Nov 19, 2022

rodrigodh commented Nov 19, 2022 • edited Loading

vitharanagedonjani-i2e commented Nov 20, 2022

darklight9811 commented Nov 20, 2022

vitharanagedonjani-i2e commented Nov 21, 2022

rodrigodh commented Nov 23, 2022

gabriel-mend commented Dec 5, 2022

jvgomg commented Dec 31, 2022

b2rsp commented Jan 3, 2023

DavidRojas1612 commented Jan 19, 2023

timweightman commented Jan 27, 2023

jbowa commented Jan 27, 2023

thomas-negrault commented Jan 29, 2023 • edited Loading

timweightman commented Jan 29, 2023

hipstersmoothie commented Feb 20, 2023

hipstersmoothie commented Feb 20, 2023

jackguoAtJogg commented Feb 20, 2023

hipstersmoothie commented Feb 20, 2023

ferreira029 commented Mar 2, 2023 • edited Loading

wolffbruno commented Mar 5, 2023

joneslloyd commented Mar 23, 2023

jbowa commented Mar 24, 2023

IvanKuzyshyn commented Mar 24, 2023

jbowa commented Apr 2, 2023

cassiocsantana commented Apr 3, 2023

gutsyphilip commented Apr 4, 2023

ricardolandolt commented Apr 5, 2023 • edited Loading

maxichrome commented Apr 7, 2023

matt-hai commented Apr 12, 2023 • edited Loading

MuLoo commented Jan 25, 2024

dzek69 commented Jan 25, 2024

MuLoo commented Jan 26, 2024

lcberaldo commented Apr 22, 2024

MuLoo commented Apr 23, 2024

rodrigodh commented Nov 19, 2022 •

edited

Loading

thomas-negrault commented Jan 29, 2023 •

edited

Loading

ferreira029 commented Mar 2, 2023 •

edited

Loading

ricardolandolt commented Apr 5, 2023 •

edited

Loading

matt-hai commented Apr 12, 2023 •

edited

Loading