煩わしい設定は一切なし!Next.jsでCSS を使う方法

この投稿は、弊社が提供するWESEEK TECH通信の一環です。
WESEEK TECH通信とは、WESEEKのエンジニアがキャッチアップした技術に関する情報を、techブログを通じて定期的に発信していくものです。

はじめに

今、フロントエンド界隈では、Next.js が流行っています。
その原因の一つに圧倒的な開発体験の良さがあります。
Next.js では開発環境を整えるための設定は全く必要ありません。

今回の記事では、そんな開発体験の良さを感じてもらうべく、Next.js で CSS を使う方法を説明したいと思います。

Next.js のバージョンを v11.0.1 で説明していきます。

はじめに
セットアップ
CSS の導入
まとめ
参考にさせていただいたサイト
関連記事

セットアップ

まずは、 Next.js をセットアップしましょう。
Node.js 12.0 以降のバージョンが使えれば問題なく使用可能です。

Next.js は公式が create-next-app を提供しています。
create-next-app を実行することで簡単に Next.js を始めることができます。

npx create-next-app

プロジェクトの名前が聞かれるので適切な名前を入力しましょう。

プロジェクトの名前をすると、次のように構築されます。
今回の例では my-app で作成しています。

typescript を使う方は --typescript フラグをつけましょう。
npx create-next-app --typescript

ここまでできたら yarn dev で起動してみましょう。

http://localhost:3000/ にアクセスして起動していることが確認できると思います。

% yarn dev
yarn run v1.22.4
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
event - compiled successfully

CSS の導入

タイトルには導入と書きましたが、すでに CSS の導入は済んでおりスタイルを変更することが可能です。

sample-app/styles/globals.css

に CSS を記述していくことでスタイルを充てることが可能です。

書いた CSS を読み込んでいるのが _app.jsx です。

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

読み込んだ CSS は全てのファイルで有効になります。

特定のコンポーネントでのみ適応される CSS を用意したい場合は、 CSS Modules を使用します。

CSS Modules も現在の Next.js のバージョン(v11.0.1)でサポートしています。

sample-app/styles/Home.module.css

をご確認ください。

こちらに CSS が記述されています。

使用する場所では次のように使用できます。

import Head from 'next/head'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
    // 中略
      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>
      </main>

    </div>

styles.{{class名}} によって CSS ファイルに指定した class をそのまま適応できます。

CSS Modules で記載したスタイルは、インポートしたファイルでのみ有効です。
そのため予期しない場所に適応されて予想外の表示崩れが発生してしまう事がないのがメリットです。