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に以下を記載します。
import { AppProps } from 'next/app';
import '@exampledev/new.css';
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
これでどのページのhtmlタグにもスタイルが適用されます。
_app.tsxについては以下が詳しいです。
- https://tyotto-good.com/blog/next-document-app
- https://www.kohei.dev/posts/7-tips-of-next-js-9-with-typescript?hl=ja-JP
② 個別ページに適用
個別のページだけに適用したい場合、そのまま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>の中身を変更することでスタイルを適用させることができました。
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（の②のケース）で実装する必要があったのでちょっと悩みながら進めたのですが、もっと綺麗なやり方があれば教えていただきたいです。