Merge pull request #43 from Atotti/hiro

nextjs7までやった！！

hiro/.gitignore

@@ -0,0 +1,2 @@
+chapter10
+chapter11

hiro/nextjs01/README.md

@@ -0,0 +1,15 @@
+### 新規プロジェクトの作成
+```
+npx create-next-app@latest nextjs-dashboard --use-npm --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example"
+```
+
+- プロジェクトに入る
+```
+cd nextjs-dashboard
+```
+
+### サーバーの起動
+```
+npm run dev
+```
+わーい

hiro/nextjs02/README.md

@@ -0,0 +1,4 @@
+layout.tsxでグローバルスタイルを設定する．
+tailwind クラスがすごい
+CSSmodule スコープが作れる
+clsx クラス名を切り替えれる

hiro/nextjs03/README.md

@@ -0,0 +1,9 @@
+- latinフォントを追加する
+- lusitanaフォントを追加する
+fonts.tsに加筆してpage.tsxでimportする．
+
+- ロゴを有効にする
+AcmeLogoコンポーネントがlusitanaを使うのでコメントアウトされていたがいけるようになった
+
+- 画像を表示する
+- モバイル用の画像を表示する

hiro/nextjs04/README.md

@@ -0,0 +1,75 @@
+### ルーティング
+フォルダ構造がURLのルーティングに使用される．
+![Alt text](https://nextjs.org/_next/image?url=%2Flearn%2Flight%2Ffolders-to-url-segments.png&w=3840&q=75&dpl=dpl_8JB59CDvJpwEWGDiYLtFnX2X3v3a)
+
+それぞれのフォルダに`page.tsx`や`layout.tsx`を配置してページを作っていく．
+![Alt text](https://nextjs.org/_next/image?url=%2Flearn%2Flight%2Fdashboard-route.png&w=3840&q=75&dpl=dpl_8JB59CDvJpwEWGDiYLtFnX2X3v3a)
+
+### Dashboardの作成
+- `/app/dashboard/page.tsx`を作成してダッシュボードページを作る．
+```
+.
+├── dashboard
+│   └── page.tsx
+```
+
+- 適当なコンポーネントを返すようにすると`localhost:3000/dashboard`にアクセスできるようになる
+```TypeScript
+export default function Page() {
+  return <p>Dashboard Page</p>;
+}
+```
+![Alt text](images/image.png)
+
+- `page.tsx`という名前のファイルのみがルーティングされるので，UIコンポーネント`/app`以下の好きなところに配置できる．
+```
+.
+├── dashboard
+│   └── page.tsx
+├── layout.tsx
+├── page.tsx
+└── ui
+    ├── acme-logo.tsx
+    ├── button.tsx
+    ├── customers
+    │   └── table.tsx
+
+```
+
+#### CustomerページとInvoiceページの作成
+```
+.
+├── dashboard
+│   ├── customers
+│   │   └── page.tsx
+│   ├── invoices
+│   │   └── page.tsx
+│   └── page.tsx
+```
+中身は適当なコンポーネントを返しておく．チュートリアル参照
+
+### Dashboardのレイアウト
+- `/app/dashboard/layout.tsx`でレイアウトを書く
+```TypeScript
+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>
+  );
+}
+```
+![Alt text](images/image-1.png)
+
+- `children`プロパティを受け取っている．JSXにおくとそこに`page.tsx`の中身が入るようになる．
+- 子ディレクトリにあたるCustomersページやInvoicesページにも適用される．
+- `/app/ui/dashboard/sidenav.tsx`にある`Sidenav`コンポーネントを呼び出している．
+- レイアウトを使用することで，ページ遷移のときに**コンポーネントが再利用される**ようになり，不要な再レンダリングを減らすことができる．partial renderingと呼ばれる．
+
+### ルートレイアウト
+`/app/layout.tsx`はルートレイアウトと呼ばれ，アプリケーション内のすべてのページに適用される．UIの他にメタデータも記述する．

hiro/nextjs05/README.md

@@ -0,0 +1,10 @@
+### リンク
+- `Link`コンポーネントを使うことでクライアント側でのページ遷移ができる．
+
+### コードの自動分割とプリフェッチ
+- Nextjsではコードはルートセグメントごとに自動で分割される．
+- 特定のページでエラーが発生してもその他のページは開ける．
+- 本番環境では`Link`コンポーネントの遷移先ページがプリフェッチされる（バックグラウンドで先読みされる）
+
+### パスを取得する
+- `usePathname`フックでパスを取得できる．

hiro/nextjs06/README.md

@@ -0,0 +1,5 @@
+### Vercelにデプロイする
+手順通りやったらできてすごい
+
+### DBの設定
+手順通りやったらできてすごい

hiro/nextjs07/README.md

@@ -0,0 +1,22 @@
+### データの取得方法
+- API層
+  - APIを提供するサービスを使う場合
+  - クライアントからデータを取得する場合
+- データベースクエリ
+  - APIエンドポイントを作るときの処理
+  - React Server Componentsを使用している場合
+
+### サーバーコンポーネントを使ってデータを取得する
+#### いいところ
+- Promiseを使った非同期処理ができる
+- 結果のみをクライアントに送信できる
+- API層がいらない
+#### SQLを使う
+- Vercel Postgres SDKでSQLが使える
+
+### Dashboardの中身を作る
+手順通りやったら行けた．SQLを使っていた関数を書くのが大変そうだと思った．
+
+### リクエストウォーターフォール
+同期処理になっているリクエスト群のこと
+特別な事情がなければ`await Promise.all()`などで並列処理するようにするのが吉（チュートリアルの`fetchCardData()`）