はじめに

この記事は下記の講座で学んだ内容をまとめています。
理解が怪しい所があるので教えてくれるととても嬉しいです。

目次

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 にラップされた状態で描画される。