Merge pull request #54 from Atotti/yuta0123

Yuta0123
Atotti · Jan 23, 2024 · f6b6225 · f6b6225
2 parents 16d741f + 114fa35
commit f6b6225
Show file tree

Hide file tree

Showing 12 changed files with 260 additions and 0 deletions.
diff --git a/yuta/chapter11/README.md b/yuta/chapter11/README.md
@@ -0,0 +1,7 @@
+# Chapter 11
+
+- Placeholder data
+  - APIサーバーがまだのときに使用するデータ
+
+- Difinitions データ
+  - データベースの内容
diff --git a/yuta/chapter12/README.md b/yuta/chapter12/README.md
@@ -0,0 +1,39 @@
+# Chapter 12 CSS
+
+## Global に変更したい
+
+1.  app/ui/global.cssを変更
+2. layout.tsxでインポート
+
+## clsx
+- コンポーネントごとの変数の値によってスタイルを変更したい場合
+
+```ts
+export default function InvoiceStatus({ status }: { status: string }) {
+  return (
+    <span
+      className={clsx(
+        'inline-flex items-center rounded-full px-2 py-1 text-xs',
+        {
+          'bg-gray-100 text-gray-500': status === 'pending',
+          'bg-green-500 text-white': status === 'paid',
+        },
+      )}
+    >
+      {status === 'pending' ? (
+        <>
+          Pending
+          <ClockIcon className="ml-1 w-4 text-gray-500" />
+        </>
+      ) : null}
+      {status === 'paid' ? (
+        <>
+          Paid
+          <CheckIcon className="ml-1 w-4 text-white" />
+        </>
+      ) : null}
+    </span>
+  );
+}
+
+```
diff --git a/yuta/chapter13/README.md b/yuta/chapter13/README.md
@@ -0,0 +1,45 @@
+# Chapter 13 font, image
+
+## fontをグローバル変更
+layout.tsxで以下のように指定
+```ts
+<html lang="en">
+  <body className={`${inter.className}` antialiased}>{children}</body>
+</html>
+```
+
+## fontを部分的に適応
+特定のコンポーネントの中のdivのclassNameを指定
+```ts
+return (
+    <div
+      className={`${lusitana.className} flex flex-row items-center leading-none text-white`}
+    >
+      <GlobeAltIcon className="h-12 w-12 rotate-[15deg]" />
+      <p className="text-[44px]">Acme</p>
+    </div>
+  );
+```
+
+## 画像の追加
+- Imageコンポーネントを使用
+
+```ts
+<div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
+    {/* Add Hero Images Here */}
+    <Image
+    src="/hero-desktop.png"
+    width={1000}
+    height={760}
+    className="hidden md:block"
+    alt="Screenshots of the dashboard project showing desktop version"
+    />
+    <Image
+    src="/hero-mobile.png"
+    width={560}
+    height={620}
+    className="block md:hidden"
+    alt="Screenshot of the dashboard project showing mobile version"
+    />
+</div>
+```
diff --git a/yuta/chapter14/README.md b/yuta/chapter14/README.md
@@ -0,0 +1,23 @@
+# Chapter 14 ルーティング
+
+- nextjsのルーティングはファイル構造で行う
+- 1つのページごとに、layout.tsx(必須じゃない?)とpage.tsxファイルを配置する
+
+## layout.tsx
+- 以下のようにlayout.tsxを配置するとネストされたファイルすべてに以下のレイアウトが適応される。
+dashboard/layout.tsx
+```tsx
+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>
+  );
+}
+```
+
diff --git a/yuta/chapter15/README.md b/yuta/chapter15/README.md
@@ -0,0 +1,19 @@
+# Chapter 15 ページ遷移
+
+- ロードの効率をあげるためにnextjsではaタグでなくLinkコンポーネントを使用する
+
+## 「Showing active links」の実装
+- 自分の今いるページが見れるように
+
+usePathname()フックを使用。
+```ts
+const pathname = usePathname()
+...
+
+className={clsx(
+              'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
+              {
+                'bg-sky-100 text-blue-600': pathname === link.href,
+              },
+)}
+```
diff --git a/yuta/chapter16/README.md b/yuta/chapter16/README.md
@@ -0,0 +1,3 @@
+# Chapter 16
+
+データベースをセットアップした
diff --git a/yuta/chapter17/README.md b/yuta/chapter17/README.md
@@ -0,0 +1,3 @@
+# Chapter 17
+
+データのfetch
diff --git a/yuta/chapter18/README.md b/yuta/chapter18/README.md
@@ -0,0 +1 @@
+# Chapter 18 動的レンダリング・静的レンダリング
diff --git a/yuta/chapter19/README.md b/yuta/chapter19/README.md
@@ -0,0 +1,24 @@
+# Chapter 19 Streaming
+- データを分けて配信することで部分部分ごとに順番に表示できる。
+
+- 実装方法
+  - ページレベル：loading.tsxファイルの利用
+  - コンポーネントレベル：Suspenseの利用
+
+## loading.tsxの利用
+
+- 実装したいページのpage.tsxと同じ階層にloading.tsxを配置、中の内容がダイナミックコンテンツの表示中に表示される
+
+- customersページにも適用されてしまうのを防ぐために、ルートグループというのを使う。
+  - page.tsxと同じ階層に()で囲むフォルダを作成し、そこに反映させたくないloading.tsxとpages.tsxを配置
+
+
+## Suspenseの利用
+- 以下のように記述
+```tsx
+<Suspense fallback={<CardsSkeleton />}>
+    <CardWrapper />
+</Suspense>
+```
+
+
diff --git a/yuta/chapter20/README.md b/yuta/chapter20/README.md
@@ -0,0 +1,5 @@
+# Chapter 20 partial-prerendering(仮)
+
+- js関数に noStore() を追加することで関数をdynamicに
+
+- 
diff --git a/yuta/chapter21/README.md b/yuta/chapter21/README.md
@@ -0,0 +1,30 @@
+# Chapter 21 Searchとページネーション
+
+- 検索ボックスのワードをurl-friendlyな文字列に変換。その後、URLをそれに更新
+```ts
+'use client';
+
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { useSearchParams, usePathname, useRouter } from 'next/navigation';
+
+export default function Search() {
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const { replace } = useRouter();
+
+  function handleSearch(term: string) {
+    const params = new URLSearchParams(searchParams);
+    if (term) {
+      params.set('query', term);
+    } else {
+      params.delete('query');
+    }
+    replace(`${pathname}?${params.toString()}`);
+  }
+}
+```
+
+## Debouncing
+- すべてのキーストロークでなく、ユーザが入力を止めた時点でのキーストロークのみを取得
+
+## ページネーション: 取得データの数に合わせてページを作成
diff --git a/yuta/chapter22/README.md b/yuta/chapter22/README.md
@@ -0,0 +1,61 @@
+# Chapter 22 データの変更
+
+## Server Actionsとは?
+- データベースのデータを変更するためのAPIエンドポイントの作成の必要性を排除
+- 「データベースのデータを変更する非同期関数」を作成し、それをクライアント/サーバーコンポーネントから呼び出す形で動作
+- セキュリティが頑丈（Server Actionsが作られた理由）
+    - 様々な攻撃から守る
+    - authorized accessの保証
+- 以下の技術を使用
+    - POSTリクエスト
+    - 暗号化されたクロージャ
+    - 入力を厳しくチェック
+    - エラーメッセージハンドリング
+    - ホスト制限
+
+### キャッシュの操作
+- データベースの操作後、「revalidatePath」・「revalidateTag」等のAPIを使用してキャッシュを操作できる。
+
+
+## Server Actionsの使用
+
+### Server Action ①: invoiceの作成
+#### 1. invoice作成用routeを作成
+#### 2. Server Action(非同期関数)の作成
+```ts
+'use server';
+
+export async function createInvoice(formData: FormData) {}
+```
+#### 3. formDataからデータを抽出
+- formData.get()を使用
+- tips: 
+#### 4. データの検証（型チェック）
+- 型チェックライブラリ「Zod」を使用
+
+#### 5. データベースにデータを追加
+
+#### 6. Revalidate and redirect
+- 速度向上のために[Client-side Route Cache](https://nextjs.org/docs/app/building-your-application/caching#router-cache)が使用されていた。データベースの更新とともにこのキャッシュも変更する必要がある。
+
+#### 最初のServer Actionが作れた！
+
+
+### Server Action ②: invoiceの更新
+- ①と基本同じだが、今回はformDataに加えてidも渡す必要有。
+
+memo: UUID vs. Auto-incrementating Keys
+
+### Server Action ③: invoiceの削除
+
+
+
+## まとめ
+- 新しいデータベースの操作方法「Server Action」の登場
+    - 従来: APIエンドポイントを使用したPOST
+    - nextjs: Server Action（非同期関数）を定義し、それを呼び出す
+- Server Actionはセキュリティが頑丈 & キャッシュの更新もできる。
+
+- Server Actionを使用して、invoiceの作成・更新・削除を実装した。
+
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Chapter 16

		データベースをセットアップした
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		# Chapter 18 動的レンダリング・静的レンダリング