Next.jsのプロジェクトへCSS-in-JS ライブラリ Linaria（リナリア）を導入するまでの手順をメモします。

Linaria（リナリア）

Linariaとは？

Linariaとは、オープンソースで開発されているCSS in JS形式のライブラリになります。
JSへスタイルを記述して実装できるのですがビルド時に独立したCSSとして出力することができます。

Linariaの特徴

• styled-componentsと同様のインターフェース
• ビルド時に CSS を生成することでランタイムでのスタイル生成を無くすことができる
• stylelintでCSSのリントが出来る

styled-componentsと同様のインターフェース

styled-commponents

import { styled } from 'styled-components'

const Box = styled.div`
  height: 200px;
  width: 200px;
  background-color: blue;
`;

export default function Home(): ReactElement {
  return (
    <Box />
  );
}

Linaria

import { 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

linaria.dev

Github

callstack/linaria: Zero-runtime CSS in JS library

github.com

やること

• プロジェクトの作成
• 必要なパッケージのインストール
• 設定ファイルを作成
• サンプルアプリの構築
• サンプルアプリの起動
• ブラウザからアクセス
• エイリアスからインポートする時のエラー

環境

• Mac OS Big SUR 11.3.1
• yarn 1.22.10
• Node 14.17.1
• Next.js 11.0.1

ファイル操作で利用する Unix コマンドについて

基本的なディレクトリ作成やファイル操作は Unix コマンドを利用します。
Unix コマンドについて詳しくはこちらの記事を参考にしてください。

【まとめ】よく使用するものだけを抜粋した Unix コマンドと Vim コマンドの一覧まとめ

t-cr.jp

事前準備

Node.js 環境が必要

事前準備として Node.js が利用できる環境で実施します。
Node.js の環境の構築について詳しくはこちらの記事を参考にしてください。

Node.js のバージョン管理ツール nodenv をインストールして Node.js 環境をサクッと構築する

t-cr.jp

yarn コマンドのインストール

事前準備として Yarn が利用できる環境で実施します。
Yarn コマンドのインストールについて詳しくはこちらの記事を参考にしてください。

Node.js のパッケージ管理ツールの Yarn をサクッとインストールする手順

t-cr.jp

TypeScript環境で実施

事前準備として TypeScript が利用できる環境で実施します。
TypeScript の実行環境の構築について詳しくはこちらの記事を参考にしてください。

ローカルに TypeScript の実行環境をサクッと構築する手順

t-cr.jp

プロジェクトの作成

プロジェクトディレクトリを作成

~/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

インストールしたパッケージを確認

  "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 のオプションはこちらの記事を参考にしてください

よく使いそうな TypeScript の tsconfig.json オプションのまとめ

t-cr.jp

サンプルアプリの構築

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
const withLinaria = require('next-linaria');
module.exports = withLinaria({});

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

import 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>
  );
}

通常のコンポーネント

// default
const Box = styled.div`
  height: 200px;
  width: 200px;
  margin-bottom: 20px;
  background-color: blue;
`;
// 中略
<Box />

コンポーネントを継承

// extend
const Box2 = styled(Box)`
  background-color: red;
`;
// 中略
<Box2 />

コンポーネントへpropsを渡す

// 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

下記を追記します。

追記する内容

  "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へアクセスしてみてください。

先ほど作成したコンポーネントの表示が確認できます。

エイリアスからインポートする時のエラー

コンポーネントのインポートにエイリアスを利用するとエラーが発生したためそのエラーの対応について別で記事を作成しました。
エイリアスを利用する際は合わせて確認いただければと思います。

【解決方法】next.jsでLinariaを利用時にエイリアスでインポートするとエラーになる対応

t-cr.jp