【Next.js入門⑥】2通りの方法でスタイリングを適用する

こちらの連載記事では、Next.jsの入門チュートリアルを紹介しながら、最終的にポートフォリオファイルの完成を目指します。

筆者もNext.jsビギナーなので、同じくNext.jsに触れるのが初めてだという方を対象に書き進めていきます。

スタイリングを行おう

前回の記事でベースレイアウトを作成しましたので、スタイルをつけていきましょう。
jsxの場合、スタイルを付けるには2つの方法があります。

components/shared/Header.js

　　　　// 省略
                <p>{ title }</p>
                <p>{ child }</p>
                <p className='customClass'>This is the elemet for styling.</p> // 追記
                <Link href='/'>
                    <a>Home</a>
                </Link>
　　　　// 省略
                <Link href='/cv'>
                    <a>CV</a>
                </Link>
　　　　// 以下を追記
                <style jsx>{`
                    a {
                        font-size: 20px;
                    }
                    .customClass {
                        color: red
                    }
                `}</style>
　　　　// ここまでを追記

このようにファイル内からスタイリングを行うことができます。

注意点としては、
style jsxという特殊なタグであること
スタイルタグの中を {` `}で囲っていること
です。

SCSSを外部から呼び込み

components/shared/Header.jsに追記をします。

import '../../styles/main.scss';
　　　　// 省略
                <p className='customClass'>This is the elemet for styling.</p>
                <p className='customClassFromFile'>This is the elemet for styling from file.</p> //追記
                <Link href='/'>
　　　　// 省略

必要なディレクトリ、ファイルを作成し、SCSSでスタイルをつけます。
styles/main.scss

.customClassFromFile {
    color: blue;
}

次にnpm経由でSCSS読み込みのためのパッケージをインストールします。

npm install --save @zeit/next-sass node-sass

再度ビルドしましょう。

npm run dev

これでSCSSファイルからのスタイリングが適用されました。

分割する方法の方が少し工程が多いですが、やはり可読性を上げるためにもパッケージを使って分割しておきたいですね。