● goober のインストール

goober では className を使用するので clsx も 同時に入れておくと便利です

npm i goober
npm i clsx

● import文を書き換えて css を className に書き換える

import { css } from "@emotion/react";
　　↓
import { css } from "goober";

css はそのまま使えます

const myStyle = css`
  background-color: #fff;
  border-radius: 8px;
  padding: 8px 16px;
  position: fixed;
  font-size: 20px;
  color: #493333;
`;

import { css } from "@emotion/react";
　　↓
import { css } from "goober";

jsx の css を classNameに書き換えます。

<div css={'myStyle'}>テスト</div>
　　↓
<div className={'myStyle'}>テスト</div>

● goober で props で CSSスタイルを受け付ける

"use client";
import { clsx } from "clsx";
import type { CSSAttribute } from "goober";
import { css } from "goober";
import type { FC } from "react";

type Props = {
  cssProp?: CSSAttribute | ReturnType<typeof css>;
};

export const MyComponent: FC<Props> = ({ cssProp }) => {
  const baseSkeletonStyle = css`
    border: solid 1px #ccc;
  `;

  return <div className={clsx(baseSkeletonStyle, cssProp)}></div>;
};

呼び出す側

<MyComponent
  cssProp={css`
    width: 50px;
    height: 20px;
  `}
/>

● goober で引数を受けとる関数を作成する

const userDocTitleStyle = (labelColor: string) => css`
  position: relative;
  display: block;
  height: 70px;
  padding: 8px 16px 8px 24px;
  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-left: 8px solid ${labelColor};
    opacity: 1;
  }
`;

● emotionのアンインストール

tsconfig.json

  "compilerOptions": {
    // この行を削除 "jsxImportSource": "@emotion/react",

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  //この行を削除 compiler: {
  //この行を削除   emotion: true,
  //この行を削除 },
};

export default nextConfig;

サーバーコンポーネントの過去ファイルから次の行を削除

/* @jsxImportSource react */

npm コマンドで アンインストール

npm uninstall @emotion/react

● extractCssを使ってSSR対応する

https://codesandbox.io/p/devbox/7m9zzl6746?