next js

_app.tsx

import App from 'next/app'
import React from 'react'
import { createCss, TCss } from '@stitches/css'
import { Provider, config } from './css'

export default class MyApp extends App<{ serverCss: TCss<typeof config> }> {
  render() {
    const { Component, pageProps, serverCss } = this.props
    return (
      <Provider css={serverCss || createCss(config)}>
        <Component {...pageProps} />
      </Provider>
    )
  }
}

_document.tsx

import { createCss } from '@stitches/css'
import Document from 'next/document'

import { config } from './css'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const css = createCss(config)
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) => <App {...props} serverCss={css} />,
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {css.getStyles().map((css, index) => (
              <style key={index}>{css}</style>
            ))}
          </>
        ),
      }
    } finally {
    }
  }
}

css.ts

import { createConfig } from '@stitches/css'
import { createStyled } from '@stitches/styled'

const config = createConfig({
  tokens: {
    colors: {
      RED: 'tomato',
    },
  },
})

const { Provider, styled, useCss } = createStyled<typeof config>()

export { config, Provider, styled, useCss }

index.tsx

import { styled } from './css'

const Header = styled.h1(css => css.color('RED'))

export default function Home() {
  return <Header>Hello world</Header>
}