この記事ではNext.js 14系を扱うため、App Routerでの実装になります。
Next.jsをインストール
yarn でインストールします。
$ yarn create next-app
TS, CSSの選択
今回はTypeScript + SCSSで開発を行います。Tailwind CSSは用いないためNoを選択します。
ルーティング
App Routerを選択します。
srcディレクトリ
あってもなくてもいいですが、今回はありで行きます。app/ ディレクトリは src/ の直下にできるため、以降 app/ から始まるパスでは src/ を省略します。
SCSSのセットアップ
SASSをインストールします。
$ yarn add -D sass
これだけでSASSが使えてしまいます。
Next.jsでSASSを扱う場合、従来のGlobal CSSと、Reactコンポーネント単位でスコープされたスタイルを定義できる CSS Modules があります。Next.jsはCSS Modulesをビルトインでサポートしています。
Global CSS
tsx ファイルで直接スタイルシートを import することができます。<body> などグローバルなスタイルを当てたいときに使うといいです。
body {
width: 100vw;
}
import "./main.scss";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ja">
<body>
{children}
</body>
</html>
);
}
CSS Modules
スタイルシートの拡張子を .module.scss とすることで、tsx ファイルの変数 styles にスタイルを注入することができます。
$rose: #fb7185;
.main {
color: $rose;
}
import styles from "./page.module.scss";
export default function Home() {
return (<main className={styles.main}>
Home
</main>)
}
スタイルを当てるにはCSSのクラス名をプロパティのようにして className へbindします。
ファイル戦略
汎用的なSCSS変数や関数（Media queryなど）のようなユーティリティは別途 app/_styles/ ディレクトリに作ったGlobal SCSSに格納しておくことにします。@use ディレクティブを .module.scss で使うことでそれらの定義ファイルをインポートできます。
$rose: #fb7185;
@use "src/app/_styles/vars.scss";
.main {
color: $rose;
}
ほかのCSS戦略
CSS-in-JS
Next.js 公式ドキュメント にスタイリングの選択肢が提示されています。Reactに特徴的なCSSの戦略として、Styled-ComponentsやEmotionに代表される CSS-in-JS があります（使ったことはありませんが）。こちらはReactコンポーネントに直接スタイルを記述していくことでscoped stylesを実現するアプローチで、JavaScriptで記述されるのが特徴です。
Tailwind CSS
yarn create next-app のときにも利用の有無を聞かれますが、これもコンポーネントに直接スタイルを記述していくアプローチです。CSS-in-JSとの違いは、こちらはユーティリティファーストを謳っており、出来合いのプロパティをインラインで記述していくことで素早いスタイリングを可能にしています。ただし可読性に欠けるなど議論は多いようです。
次回記事について
コンポーネントの使い分け
React Server Component (RSC) とClient Componentの使い分けについて、React Hooksを使いながら理解します。
props
Reactにおけるpropsの仕組みについて理解します。
リファレンス
関連記事
記事がありません
