From 3bc423b5a130419ac1faf6291980121e4b0f9254 Mon Sep 17 00:00:00 2001
From: Ritsuki <rit3636@yahoo.co.jp>
Date: Wed, 10 Jan 2024 15:31:06 +0900
Subject: [PATCH] 14-17

---
 Ritsu/chapter14/README.md | 36 ++++++++++++++++++++++++++++++++++++
 Ritsu/chapter15/README.md | 14 ++++++++++++++
 Ritsu/chapter16/README.md |  9 +++++++++
 Ritsu/chapter17/README.md | 26 ++++++++++++++++++++++++++
 4 files changed, 85 insertions(+)
 create mode 100644 Ritsu/chapter14/README.md
 create mode 100644 Ritsu/chapter15/README.md
 create mode 100644 Ritsu/chapter16/README.md
 create mode 100644 Ritsu/chapter17/README.md

diff --git a/Ritsu/chapter14/README.md b/Ritsu/chapter14/README.md
new file mode 100644
index 0000000..904cc13
--- /dev/null
+++ b/Ritsu/chapter14/README.md
@@ -0,0 +1,36 @@
+# レイアウトとページの作成
+
+## ダッシュボードページの作成
+
+入れ子構造の`page.tsx`は`/`を用いることで表示することが可能。
+Next.js では`page`という名前をつけ、
+```
+export default function Page() {
+  return <p></p>;
+}
+```
+とすることでUIコンポーネントを同じ場所に配置することができる。
+
+## ダッシュボードレイアウトの作成
+Next.jsでは`layout.tsx`ファイルを使用して、複数のページ間で共有されるUIを作成することができる。以下その内容。
+
+```
+import SideNav from '@/app/ui/dashboard/sidenav';
+ 
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
+      <div className="w-full flex-none md:w-64">
+        <SideNav />
+      </div>
+      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
+    </div>
+  );
+}
+```
+
+- `<SideNav />`コンポーネントをレイアウトにインポート。
+- `<Layout />`コンポーネントは`children`プロパティを受け取り、ページまたは別のレイアウトのいずれかになる。
+
+## ルートレイアウト
+`/app/layout.tsx`はルートレイアウトと呼ばれ、ここで追加したUIはアプリケーション内のすべてのページで共有される。
\ No newline at end of file
diff --git a/Ritsu/chapter15/README.md b/Ritsu/chapter15/README.md
new file mode 100644
index 0000000..37623ef
--- /dev/null
+++ b/Ritsu/chapter15/README.md
@@ -0,0 +1,14 @@
+# ページ間の移動
+
+## `<Link>`コンポーネント
+`<Link />`コンポーネントを使用することでアプリケーション内のページ間をリンクすることができる。このコンポーネントを使用するには`<a>`を`<Link>`に置き換える。
+例えば、`<a href='...'>`の代わりに`<Link href='...'>`を使用する。
+
+## 自動コード分割とプリフェッチ
+Next.jsはアプリケーションをルートセグメントごとに自動的にコード分割する。これは、従来のReact SPA とは異なる。ブラウザは初期ロード時にすべてのアプリケーションコードをロードする。
+コードをルートごとに分割すると、ページが分離され、たとえ特定のページでエラーが発生しても、アプリケーションの残りの部分は引き続き動作する。
+さらに、宛先ページのコードはすでにバックグラウンドで読み込まれており、これによりページ遷移は瞬時に行われる。
+
+## アクティブリンクの表示
+URLからユーザーの現在のパスを取得することができる`usePathname()`というフックが用意されている。
+これはフックなので、そのファイルはクライアントコンポーネントに変える必要がある。
\ No newline at end of file
diff --git a/Ritsu/chapter16/README.md b/Ritsu/chapter16/README.md
new file mode 100644
index 0000000..da1d266
--- /dev/null
+++ b/Ritsu/chapter16/README.md
@@ -0,0 +1,9 @@
+# データベースのセットアップ
+
+- GitHubリポジトリの作成
+- vercelアカウントの作成
+- プロジェクトに接続してデプロイする
+- Postgres データベースの作成
+- データベースをシードする
+- データベースを探索する
+- クエリの実行
\ No newline at end of file
diff --git a/Ritsu/chapter17/README.md b/Ritsu/chapter17/README.md
new file mode 100644
index 0000000..c68b79b
--- /dev/null
+++ b/Ritsu/chapter17/README.md
@@ -0,0 +1,26 @@
+# データの取得
+## データの取得方法の選択
+- API
+    APIは、アプリケーションコードとデータベースの間の中間層。APIの利用ケースはいくつかある。
+    - APIを提供するサードパーティサービスを使用している場合。
+    - クライアントからデータを取得する際、データベースの情報が漏れることを避けるために、サーバー上で実行されるAPI層が必要。
+    Next.jsでは、ルートハンドラーを使用してAPIエンドポンンとを作成できる。
+
+- データベースクエリ
+    フルスタックアプリケーションを作成する場合は、データベースの利用が必要。
+    - APIエンドポイントを作成するときは、データベースと対話するロジックを作成する必要あり。
+    - React Server Components(サーバー上のデータを取得)を使用している場合は、APIレイヤーをスキップして、データベースの秘密をクライアントに公開する危険を冒さずにデータベースに直接クエリを実行できる。
+
+- SQLの使用
+    SQLは、リレーショナルデータベースにクエリを実行するための業界標準。
+
+    
+### サーバーコンポーネント
+デフォルトでは、Next.jsアプリケーションはReact Server Components を使用する。これを利用したデータの取得は比較的新しいアプローチであり、いくつか利点がある。
+    - サーバー上で実行されるため、追加のAPI層を使用せずに直接クエリを実行できる。
+    - 特定のデータを取得して操作できる。
+
+## ダッシュボード概要ページのデータ取得
+
+## 並列データフェッチ
+