● 1. linaria のインストール

npm install @linaria/core @linaria/react
npm install next-with-linaria

● 2. Next.js設定（next.config.ts）

import type { NextConfig } from "next";
import withLinaria from "next-with-linaria";

const nextConfig: NextConfig = {
  /* config options here */
};

export default withLinaria(nextConfig);

● コンポーネントで使用する

なんと、SSR自動で対応できます。

"use client";

import { css } from "@linaria/core";
import type { FC } from "react";

export const ClientComponent: FC = () => {
  return <div className={clientStyle}>ClientComponent</div>;
};

const clientStyle = css`
    background-color: lightgray;
    border: 1px solid gray;
`;

SSRの時は以下のようなCSSとして読み込まれます。

＜link rel="stylesheet" href="/_next/static/chunks/%5Broot-of-the-server%5D__9aee51b5._.css" data-precedence="next_static/chunks/[root-of-the-server]__9aee51b5._.css"/>

● animationは css の中に記述する

const containerClass = css`
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  animation: skeleton 1.5s infinite ease-in-out;

  @keyframes skeleton {
    0%, 100% {
      background-color: #f6f6f6;
    }
    50% {
      background-color: #f3f3f3;
    }
  }
`;

● 動的スタイリング styled のみ使用可能です。

・動的スタイリングは styled のみ使用可能です。

const Title = styled.h1`
  font-family: ${families.serif};
`;

・styledではなく css で使いたい場合は、動的スタイルだけ style に逃す✅ のが良いでしょう

・もしくはcss変数を使います（微妙かな..）

https://github.com/callstack/linaria/blob/master/docs/DYNAMIC_STYLES.md

import React from 'react';
import { css } from '@linaria/core';

const box = css`
  height: var(--box-size);
  width: var(--box-size);
`;

export function Box({ size }) {
  return (
    <div
      className={box}
      style={{ '--box-size': size }}
    />
  );
}