React/Next.jsを用いた開発の疑問点メモ①

大分ご無沙汰しております。実に7年ぶりですね。こちらで宣言したサービス開発を頑張っていくに際して、その軌跡をこちらに書いていこうと思います。

ご無沙汰しております。
この年末年始から家庭内サービス開発をしてみようと思い、活動を再開しました。リモートワークで弛んだお腹の改善もしたいという思いから、トレーニングした成果を管理出来るようにしたいなと考えています！
皆さまお知恵をお貸し頂けると幸いです。私も成果報告していきます。
— WEB Engineer Architect Tips (@weaps_net) 2024年1月2日

Next.jsをインストールした後に、ルート直下へのアクセスが何故 app/page.tsx に行くのだろう？

下記のサイトによると、Next.js 13 の仕様らしい。 zenn.dev ※新たに App Router が追加されたかららしいが、12以前を知らないため、残念ながらその前はどうだったかは分からない

CSSの適用のされ方が不思議

上記のようにソースコードを変更して画面をリロードすると、下記の様になる CSSを何処で適用しているわけでもないのに、理由が分からない。色々調査して見たところ、 src/app/globals.css を削除するとデザインが適用されないようだ。

glocals.css というものを頼りに検索をおこなうと下記のサイトが見つかった。 y-hiroyuki.xyz 曰く、

global CSSとは、Next.jsで使用するクライアント側の全ページで適用されるcssのことを指しています。 global CSSを使用することで「header、footer」など共通部分のcssを一度打つだけで全ページで適用させることができます！

とのこと。だが、その後の文章を読むに

pagesディレクトリ直下にapp.jsを追加して下さい！既にある方はこの記事で構造を学んで頂ければと思います！ app.js import '../styles/global.css'

export default function App({ Component, pageProps }) { return } 中身は上記のようにして下さい！

とあるので、どうやら何処かでインポートをしている様だ。プロジェクトからglobals.cssというファイル名で探すと下記の記載が見つかった。 layout.tsxファイルにimportしている記述がある。この行をコメントアウトするとCSSの反映が無くなったため、このtsxファイルがデフォルトで読み込まれているように見える。