大分ご無沙汰しております。実に7年ぶりですね。
こちらで宣言したサービス開発を頑張っていくに際して、その軌跡をこちらに書いていこうと思います。
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ファイルがデフォルトで読み込まれているように見える。
下記のサイトを読むに
zenn.dev
appディレクトリ配下で layout.tsx ファイルを定義するとLayoutとして定義できます。
例えば、以下のようなLayoutを定義することができます。
との記述がある。やはりNext.js13 の機能の様だ。
どんなディレクトリ構成が良いのか
色々と記載しているサイトを見つけたが
hello.shelfy.co.jp
こちらのサイトを参考にすることにする。
画面をどのようにコンポーネント構成するのが良いのか
こちらも色々とサイトを見てみたが、いわゆるデファクト的な構成は見つけられず……(探し方が悪いのかと思いますが、、、)
qiita.com
ここを参考にして、
// page.index.tsx
const Page: NextPage = () => (