覚え書き

初心者的メモ
Next.js公式チュートリアルやってみた
【CSS】のところ
公式チュートリアルのURL

https://nextjs.org/learn/basics/assets-metadata-css/polishing-layout

`-.css`ファイルは
`-.module.css`とする必要があるらしい

HTML, CSSの時のcssはリセットCSS以外作った事が無かったのですが、ここで、レイアウト用とテキスト用のmodule.cssをそれぞれ用意するという事を学びました。

（ top = 一番上のフォルダ名）

レイアウトなど用（コンテナー、ヘッダー等構成系？）
top/components/layout.module.css
テキストなど用（font-sizeやline-height等要素系？）
top/styles/utils.module.css

これをimportする構文

top/components/layout.jsとtop/pages/index.jsにimportする
（他ファイルからも読み込ませが必要だったりする？）

top/components/layout.js

//import
import styles from './layout.module.css';
import utilStyles from '../styles/utils.module.css';
import //その他のimportも記述

//Layoutコンポーネント
export default function Layout ({/* 省略 */}){
    return (
    <div>
    ////省略
        <Head>
        ////<meta><link>など・・・省略
        </Head>
        <header>
        ////省略
        </header>
        <main>
        ////省略
        </main>
        <footer>
        ////省略
        </footer>
    </div>
    );
}

まとめ

短いですが、まとめを。

CSSの書き方の参考になる（悩みやすい初心者）
-.module.cssファイルを種類別で生成する
importで読み込ませる
コードやファイル追加によっては状況が変わるかも
初心者メモなのでバグ他ご注意ください😅

プログラミング武装は量をこなしたり、バグに対処したりなど、時間や経験の積み重ねだと思ってるので、頑張ってこなしていこうと思います！