Reactの公式ページから今回はNext.JSを使用していきます。

公式のコマンドからプロジェクトの作成

npx create-next-app@latest

初期状態の起動確認はnpm run devで確認。
ファイルルーティングシステムというものになっていて、app/がルート（/）で表示される。
ディレクトリ階層についてpage.tsxとlayout.tsxが存在する作りになっている。
階層とファイルの作り方はApp Routerとは別でPage Routerというものがあるらしいのでこっちについては別途確認する。基本ベールはApp RouterでOK。

src/
 ├ app/
 │ ├ page.tsx→コンテンツのページ
 │ ├ layout.tsx→ページ間で共有するUIの定義
 │ ├ hoge/
 │    ├ page.tsx→コンテンツのページ
 │    ├ layout.tsx→ページ間で共有するUIの定義
 │    └ fuga/
 │      ├ page.tsx→コンテンツのページ
 │      └ layout.tsx→ページ間で共有するUIの定義
 

構造についてはReactのものとあまり変わっていないよう。
https://nextjs.org/docs/getting-started/project-structure

一旦今日はここまで、
次回ディレクトリとファイルを作成していく。