はじめに
この記事は下記の講座で学んだ内容をまとめています。
理解が怪しい所があるので教えてくれるととても嬉しいです。
目次
1.速習App Router#1 <- この記事
2.速習App Router#2
3.速習App Router#3
4.速習App Router#4
5.速習App Router#5
6.速習App Router#6
7.速習App Router#7
フォルダでルーティングが行われる
App Routerではフォルダを階層上に作っていくことが出来る。
各フォルダにはURLパスでアクセスすることが出来る。
単純にディレクトリ構造のapp/hoge が web上の http://localhost:3000/hoge に対応しているというだけの話
各フォルダに作成するファイルの意味
一つのフォルダには
・page.tsx
・layout.tsx
・loading.tsx
・error.tsx
が存在する。
・page.tsx は そのページのUIを記述する
・layout.tsx は page.tsxに対するレイアウトを記述する
・loading.tsx は page.tsxの読み込み時に返されるUIを記述する
・error.tsx は page.tsxのエラー時に返されるUIを記述する
という意味を持つ。
各種ファイルのコンポーネントとしての順序は画像の通りになっている。
例えば http://localhost:3000 へのアクセスには app/page.tsx が app/layout.tsx にラップされた状態で描画される。