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';exportdefaultfunctionApp({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>の中身を変更することでスタイルを適用させることができました。
importHeadfrom'next/head';constSample=()=>{return(<html><Head><linkrel="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>);};exportdefaultSample;まとめ
結局細かい調整したくなるので普通に.css作るかstyled-componentのようなCSS in JS使うケースが多くNext.jsでClasslessCSS使うケースってあまり多くないのかなと思いました。
ただ今回はたまたまNext.jsかつClassless CSS（の②のケース）で実装する必要があったのでちょっと悩みながら進めたのですが、もっと綺麗なやり方があれば教えていただきたいです。