Next.jsでClassless CSS

Next.jsでClassless CSSを適用する機会があったので記しておきます。

Classless CSSとは

class属性（やid属性）をセレクタで使用してスタイルを適用するのがCSSの基本ですが、
Classless CSSはclass属性を使用せずhtmlのタグを使用するだけでスタイルを適用することができるCSSのフレームワークです。

種類もかなり豊富です。
https://github.com/dbohdan/classless-css

Classless CSSのいいところは手軽に使うことができる点です。
htmlのタグを書くだけなのでクラス名やコンポーネントの使い方を覚える必要がありません。

以下、new.cssの例ですがタグに直接スタイルが適用されています。

さっそく次から使ってみます。

①　グローバルに適用

まずはyarnで持ってきます。

yarn add @exampledev/new.css

Next.jsでページ全体に適用させたい時はpages/_app.tsxに以下を記載します。

_app.tsx

import { AppProps } from 'next/app';
import '@exampledev/new.css';

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

これでどのページのhtmlタグにもスタイルが適用されます。

_app.tsxについては以下が詳しいです。

②　個別ページに適用

個別のページだけに適用したい場合、そのままimportしようとしても以下のエラーが発生します。

Global CSS cannot be imported from files other than your Custom . Please move all global CSS imports to pages/_app.tsx. Or convert the import to Component-Level CSS (CSS Modules).

グローバルに適用するCSSは_app.tsxで読み込めということらしいです。
適用するcssファイルをcssを配置するフォルダに持ってきて使う、とかで回避できそうですがその方法はちょっと微妙。

なので結局next/headの<Head>コンポーネントを使って<head>の中身を変更することでスタイルを適用させることができました。

sample.tsx

import Head from 'next/head';

const Sample = () => {
  return (
    <html>
      <Head>
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1/new.min.css"
        />
      </Head>
      <body>
        <header>
          <h1>About</h1>
        </header>
        <div>
          <details>
            <summary>Sample</summary>
            <p>This is sample.</p>
          </details>
        </div>
      </body>
    </html>
  );
};

export default Sample;

まとめ

結局細かい調整したくなるので普通に.css作るかstyled-componentのようなCSS in JS使うケースが多くNext.jsでClasslessCSS使うケースってあまり多くないのかなと思いました。

ただ今回はたまたまNext.jsかつClassless CSS（の②のケース）で実装する必要があったのでちょっと悩みながら進めたのですが、もっと綺麗なやり方があれば教えていただきたいです。

Next.jsでClassless CSSを適用する

Next.jsでClassless CSS

Classless CSSとは

① グローバルに適用

② 個別ページに適用

まとめ

①　グローバルに適用

②　個別ページに適用