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

Linaria（リナリア）

Linariaとは？

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

Linariaの特徴

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

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

styled-commponents

TsxCopy codeimport { styled } from 'styled-components'

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

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

Linaria

TsxCopy codeimport { 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

callstack/linaria: Zero-runtime CSS in JS library|https://opengraph.githubassets.com/82d46d7360074866ae8093554c31ac3465a314d354b7c92378d557cde13ee553/callstack/linaria|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 コマンドについて詳しくはこちらの記事を参考にしてください。

事前準備

Node.js 環境が必要

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

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

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

TypeScript環境で実施

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

プロジェクトの作成

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

~/next-linaria-sampleというプロジェクトディレクトリを作成します。

terminalCopy code$ mkdir ~/next-linaria-sample

プロジェクトディレクトリへ移動

作成した~/next-linaria-sample ディレクトリへ移動します。

terminalCopy code$ mkdir ~/next-linaria-sample

yarn を初期化をして package.json を作成

yarn でプロジェクトの初期化を行います。
npm で実施する方は必要に応じて変更してください。

terminalCopy code$ 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コマンドで必要パッケージをまとめてインストールします。

terminalCopy code$ yarn add linaria next next-linaria react react-dom

開発に関連するパッケージのため -Dオプションを付与しています。

terminalCopy code$ yarn add @babel/core @babel/preset-env @types/node @types/react typescript

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

perlCopy code  "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 を作成します。

terminalCopy code$ vi tsconfig.json

tsconfig.json の設定例

tsconfig.jsonCopy code{
  "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の設定を追加します。

terminalCopy code$ vi ~/next-linaria-sample/next.config.js

下記内容を追記します。

next.config.js

~/next-linaria-sample/next.config.jsCopy codeconst withLinaria = require('next-linaria');
module.exports = withLinaria({});

babelの設定

.babelrcを追加しbabelの設定を追加します。

terminalCopy code$ vi ~/next-linaria-sample/.babelrc

.babelrc

.babelrcCopy code{
  "presets": ["next/babel", "linaria/babel"]
}

ソースディレクトリの作成

プロジェクトルートへsrcディレクトリを作成します。

terminalCopy code$ mkdir src

pagesディレクトリの作成

作成した src ディレクトリの中にpagesディレクトリを作成します。

terminalCopy code$ mkdir src/pages

index.tsxの作成

作成したpagesディレクトリへ index.tsx を追加します。

terminalCopy code$ vim ~/next-sample/pages/index.tsx

下記内容を追記します。

index.tsx

javascriptCopy codeimport 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>
  );
}

通常のコンポーネント

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

コンポーネントを継承

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

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

scssCopy code// props
const Box3 = styled(Box)<{ color: string }>`
  background-color: ${(props) => props.color};
`;
// 中略
<Box3 color={'green'} />

サンプルアプリの起動

アプリケーションを起動させていきます。

npm scriptsへ起動コマンドの追加

package.jsonのscriptsへ起動コマンドを追記します。
Next.jsの開発時の起動コマンドは next devです。

terminalCopy code$ vim ~/next-sample/package.json

下記を追記します。

追記する内容

jsonCopy code  "scripts": {
    "dev": "next dev"
  },

起動コマンドの実行

yarn devコマンド実行します。

terminalCopy code$ yarn dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
// 中略　
wait  - compiling...
event - compiled successfully

コンソールへsuccessfullyと表示されたらアプリケーション起動は成功です。

ブラウザからアクセス

アプリケーションが起動したのでブラウザからアクセスしてみます。 http:localhost:3000へアクセスしてみてください。

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

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

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