Next.js環境でコンポーネント単位でCSSを適応する
コンポーネント単位で、CSSをNextの環境で実装したい場合は、以下のようにやります。
①CSS Modulesを読み込む
import styles from './layout.module.css'①CSSを適用したい箇所全体をLayoutコンポーネントでラップする
②以下のようにstyles.<該当のセレクタ> を適応する
export default function Layout({ children }) {
return <div className={styles.container}>{children}</div>
}この手法でCSSモジュールを実装した場合、実際のページでDevelopertoolを参照するとCSS Moduleのクラス名は自動で一意の名前に変換されるのがわかります。
Next.js環境にグローバルCSSを適応する
また、グローバルに全体のモジュールでまたがって適応したいスタイルがある場合には、_app.jsファイルを作成し、グローバルCSSを追加して適応します。
SCSSを使用する
Next.js環境でもSassを使用することができます。
npm install sassファイル名は.module.scss または.module.sassで作成する必要があります。
Witten by Masa
情報工学系学部卒のエンジニアです。メインはフロントエンドですが、そのほかにもPython,PHP,GAS,など色んな言語、開発、データ分析、マーケティングなど手広くやってます。