Next.jsプロジェクトへCSS-in-JS ライブラリLinariaを導入する手順

Next.jsのプロジェクトへCSS-in-JS ライブラリ Linaria(リナリア)を導入するまでの手順をメモします。
Linaria(リナリア)
Linariaとは?
Linariaとは、オープンソースで開発されているCSS in JS形式のライブラリになります。
JSへスタイルを記述して実装できるのですがビルド時に独立したCSSとして出力することができます。
Linariaの特徴
- styled-componentsと同様のインターフェース
- ビルド時に CSS を生成することでランタイムでのスタイル生成を無くすことができる
- stylelintでCSSのリントが出来る
styled-componentsと同様のインターフェース
styled-commponents
Tsximport { styled } from 'styled-components'
const Box = styled.div`
height: 200px;
width: 200px;
background-color: blue;
`;
export default function Home(): ReactElement {
return (
<Box />
);
}
Linaria
Tsximport { styled } from 'linaria/react';
const Box = styled.div`
height: 200px;
width: 200px;
background-color: blue;
`;
export default function Home(): ReactElement {
return (
<Box />
);
}
公式サイト
Linaria – zero-runtime CSS in JS library
Github
やること
環境
- Mac OS Big SUR 11.3.1
- yarn 1.22.10
- Node 14.17.1
- Next.js 11.0.1
ファイル操作で利用する Unix コマンドについて
基本的なディレクトリ作成やファイル操作は Unix コマンドを利用します。
Unix コマンドについて詳しくはこちらの記事を参考にしてください。
事前準備
Node.js 環境が必要
事前準備として Node.js が利用できる環境で実施します。
Node.js の環境の構築について詳しくはこちらの記事を参考にしてください。
yarn コマンドのインストール
事前準備として Yarn が利用できる環境で実施します。
Yarn コマンドのインストールについて詳しくはこちらの記事を参考にしてください。
TypeScript環境で実施
事前準備として TypeScript が利用できる環境で実施します。
TypeScript の実行環境の構築について詳しくはこちらの記事を参考にしてください。
プロジェクトの作成
プロジェクトディレクトリを作成
~/next-linaria-sample
というプロジェクトディレクトリを作成します。
terminal$ mkdir ~/next-linaria-sample
プロジェクトディレクトリへ移動
作成した~/next-linaria-sample ディレクトリへ移動します。
terminal$ mkdir ~/next-linaria-sample
yarn を初期化をして package.json を作成
yarn でプロジェクトの初期化を行います。
npm で実施する方は必要に応じて変更してください。
terminal$ yarn init -y
yarn init v1.22.10
warning The yes flag has been set. This will automatically answer yes to all questions, which may have security implications.
success Saved package.json
✨ Done in 0.08s.
必要なパッケージのインストール
必要なパッケージ
- linaria
- next
- next-linaria
- react
- react-dom
- @babel/core
- @babel/preset-env
- @types/node
- @types/react
- typescript
パッケージのインストール
yarn add
コマンドで必要パッケージをまとめてインストールします。
terminal$ yarn add linaria next next-linaria react react-dom
開発に関連するパッケージのため -D
オプションを付与しています。
terminal$ yarn add @babel/core @babel/preset-env @types/node @types/react typescript
インストールしたパッケージを確認
perl "dependencies": {
"linaria": "^2.1.0",
"next": "^11.0.1",
"next-linaria": "^0.11.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/preset-env": "^7.14.7",
"@types/node": "^16.0.0",
"@types/react": "^17.0.13",
"typescript": "^4.3.5"
}
設定ファイルを作成
tsconfig.json を作成
プロジェクトルートへ tsconfig.json を作成します。
terminal$ vi tsconfig.json
tsconfig.json の設定例
tsconfig.json{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
ts-config のオプションはこちらの記事を参考にしてください
サンプルアプリの構築
Next.jsのアプリケーションを作成していきます。
linariaをNext.jsで使う設定
linariaを利用できるようにするために
next.config.js
を作成してnext-linariaの設定を追加します。
terminal$ vi ~/next-linaria-sample/next.config.js
下記内容を追記します。
next.config.js
~/next-linaria-sample/next.config.js
babelの設定
.babelrcを追加しbabelの設定を追加します。
terminal$ vi ~/next-linaria-sample/.babelrc
.babelrc
.babelrc{
"presets": ["next/babel", "linaria/babel"]
}
ソースディレクトリの作成
プロジェクトルートへsrc
ディレクトリを作成します。
terminal$ mkdir src
pagesディレクトリの作成
作成した src
ディレクトリの中にpages
ディレクトリを作成します。
terminal$ mkdir src/pages
index.tsxの作成
作成したpages
ディレクトリへ index.tsx を追加します。
terminal$ vim ~/next-sample/pages/index.tsx
下記内容を追記します。
index.tsx
javascriptimport React, { ReactElement } from 'react';
import { styled } from 'linaria/react';
// default
const Box = styled.div`
height: 200px;
width: 200px;
margin-bottom: 20px;
background-color: blue;
`;
// extend
const Box2 = styled(Box)`
background-color: red;
`;
// props
const Box3 = styled(Box)<{ color: string }>`
background-color: ${(props) => props.color};
`;
export default function Home(): ReactElement {
return (
<React.Fragment>
<Box />
<Box2 />
<Box3 color={'green'} />
</React.Fragment>
);
}
通常のコンポーネント
css// default
const Box = styled.div`
height: 200px;
width: 200px;
margin-bottom: 20px;
background-color: blue;
`;
// 中略
<Box />
コンポーネントを継承
javascript// extend
const Box2 = styled(Box)`
background-color: red;
`;
// 中略
<Box2 />
コンポーネントへpropsを渡す
scss// props
const Box3 = styled(Box)<{ color: string }>`
background-color: ${(props) => props.color};
`;
// 中略
<Box3 color={'green'} />
サンプルアプリの起動
アプリケーションを起動させていきます。
npm scriptsへ起動コマンドの追加
package.json
のscripts
へ起動コマンドを追記します。
Next.jsの開発時の起動コマンドは next dev
です。
terminal$ vim ~/next-sample/package.json
下記を追記します。
追記する内容
json "scripts": {
"dev": "next dev"
},
起動コマンドの実行
yarn dev
コマンド実行します。
terminal$ yarn dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
// 中略
wait - compiling...
event - compiled successfully
コンソールへsuccessfully
と表示されたらアプリケーション起動は成功です。
ブラウザからアクセス
アプリケーションが起動したのでブラウザからアクセスしてみます。
http:localhost:3000
へアクセスしてみてください。
先ほど作成したコンポーネントの表示が確認できます。
エイリアスからインポートする時のエラー
コンポーネントのインポートにエイリアスを利用するとエラーが発生したためそのエラーの対応について別で記事を作成しました。
エイリアスを利用する際は合わせて確認いただければと思います。
- article
next.jsでLinariaをエイリアスでインポート時に発生するエラーの原因と解決策
- article
Next.jsプロジェクトへCSS-in-JS ライブラリLinariaを導入する手順
- article
【解決策】Next.js での CORS エラーの原因と対処方法まとめ
- article
Next.js で環境変数を安全に管理するベストプラクティス
- article
shadcn/ui × Next.js:モダンな UI を爆速構築する方法
- article
Next.js の Image コンポーネント徹底攻略:最適化・レスポンシブ・外部 CDN 対応
- article
NextJS で始める Web アプリケーションの多言語・国際化対応の方法
- article
【徹底解説】Next.js での SSG・SSR・ISR の違いと使い分け
- article
Emotion の css プロップで爆速スタイリング
- article
styled-components と Emotion の違いを徹底比較
- article
Emotion 入門:3 分でわかるセットアップと最初の一歩
- article
Vite で CSS プリプロセッサ(Sass, Less, Stylus)を利用する
- article
Vite で画像・アセット管理をシンプルに行う方法
- article
Tailwind CSS でグリッドレイアウトを構築:CSS Grid との連携実例
- article
React 開発を加速する GitHub Copilot 活用レシピ 20 選
- article
Prisma の公式ドキュメントを使い倒すためのコツ
- article
GitHub Actions × Node.js:テストとデプロイを自動化する
- article
Pinia × TypeScript:型安全なストア設計入門
- article
Obsidian デイリーノート活用術:毎日の思考ログを資産に変える方法
- article
Git で特定のコミットを打ち消す!git revert の正しい使い方
- blog
iPhone 17シリーズの発表!全モデルiPhone 16から進化したポイントを見やすく整理
- blog
Googleストアから訂正案内!Pixel 10ポイント有効期限「1年」表示は誤りだった
- blog
【2025年8月】Googleストア「ストアポイント」は1年表記はミス?2年ルールとの整合性を検証
- blog
Googleストアの注文キャンセルはなぜ起きる?Pixel 10購入前に知るべき注意点
- blog
Pixcel 10シリーズの発表!全モデル Pixcel 9 から進化したポイントを見やすく整理
- blog
フロントエンドエンジニアの成長戦略:コーチングで最速スキルアップする方法
- review
今の自分に満足していますか?『持たざる者の逆襲 まだ何者でもない君へ』溝口勇児
- review
ついに語られた業界の裏側!『フジテレビの正体』堀江貴文が描くテレビ局の本当の姿
- review
愛する勇気を持てば人生が変わる!『幸せになる勇気』岸見一郎・古賀史健のアドラー実践編で真の幸福を手に入れる
- review
週末を変えれば年収も変わる!『世界の一流は「休日」に何をしているのか』越川慎司の一流週末メソッド
- review
新しい自分に会いに行こう!『自分の変え方』村岡大樹の認知科学コーチングで人生リセット
- review
科学革命から AI 時代へ!『サピエンス全史 下巻』ユヴァル・ノア・ハラリが予見する人類の未来