本PJではNextJS公式チュートリアルを元に実施します
今回はchapter4の内容となります！
Webサイトの骨格づくり：ページと共通レイアウト
Webサイトを作るとき、「どうやってページを増やしていくんだろう？」「ヘッダーやサイドバーみたいに、どのページでも同じ部分はどう管理するの？」と疑問に思いますよね。
今回は、Next.jsのApp Routerが、このWebサイトの骨格づくりをいかに直感的でパワフルに実現しているかを見ていきましょう。
📂 ページの作り方：フォルダがそのままURLになる！
Next.jsのApp Routerでは、ページのURL構造は、PCでフォルダを作るのと同じくらいシンプルです。
-
ルール：
appフォルダの中に新しいフォルダを作ると、それが新しいURLになります。
そして、このフォルダを「Webページ」としてインターネットに公開するための合言葉が、page.tsxという名前のファイルです。
具体例
/dashboardというURLのページを作りたい場合：
-
appフォルダの中にdashboardというフォルダを作成します。 - その
dashboardフォルダの中にpage.tsxファイルを作り、中身（Reactコンポーネント）を記述します。
たったこれだけで、http://.../dashboardにアクセスできるページが完成します。とても直感的ですよね。
🧩 共通パーツの作り方：layout.tsx で無駄をなくす
ダッシュボード内のどのページにも、共通のサイドナビゲーションを表示したいとします。各ページに同じコードをコピペするのは非効率ですし、修正も大変です。
このお悩みを解決するのがlayout.tsxです。
-
ルール： 共通パーツで囲みたいページのフォルダに
layout.tsxファイルを置きます。
このレイアウトは、中身となるページ ({children}) を受け取って、その周りに共通パーツを配置する 「額縁」 のようなものです。
例えば、/app/dashboard/layout.tsxを作成してサイドナビゲーションを配置すると、/dashboard/settingsや/dashboard/analyticsなど、dashboardフォルダ配下のすべてのページが自動的にその「額縁」の中に入って表示されます。
⚡ Next.jsの真骨頂：無駄な再描画をしない「部分レンダリング」
このレイアウト機能の最もすごい点が 「部分レンダリング」 です。
ユーザーがサイドナビゲーションをクリックして、ダッシュボード内の別のページに移動したとき、Next.jsはページの中身だけを賢く入れ替え、共通のレイアウト（サイドナビゲーション）は再読み込みしません。
これは、同じレストランの同じテーブルで、料理だけを次々と変えてもらうようなものです。テーブルや椅子、内装（レイアウト）はそのままなので、非常に高速でスムーズな体験を提供できます。
🏛️ すべてのページの土台：必須ファイル /app/layout.tsx
すべてのNext.jsプロジェクトには、appフォルダの直下にlayout.tsx（ルートレイアウト）が必ず存在し、これは必須ファイルです。
このファイルは、アプリケーション全体の「大枠」を定義する最も外側の「額縁」です。
-
役割：
-
<html>や<body>タグを定義する。 - サイト全体で使うフォントやCSSを読み込む。
-
アプリケーションの土台となる、非常に重要なファイルです。
今回はここまで！
ご覧いただきありがとうございます！