From 69d7f56c2ceb15ab1700cad22134b387ea7326e1 Mon Sep 17 00:00:00 2001 From: yumarun Date: Tue, 23 Jan 2024 08:09:06 +0900 Subject: [PATCH 01/12] chap11 --- yuta/chapter11/README.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 yuta/chapter11/README.md diff --git a/yuta/chapter11/README.md b/yuta/chapter11/README.md new file mode 100644 index 0000000..36b6ba9 --- /dev/null +++ b/yuta/chapter11/README.md @@ -0,0 +1,7 @@ +# Chapter 11 + +- Placeholder data + - APIサーバーがまだのときに使用するデータ + +- Difinitions データ + - データベースの内容 \ No newline at end of file From 8029dd47b8936d353eafa998ac5b1c85bbaa2e85 Mon Sep 17 00:00:00 2001 From: yumarun Date: Tue, 23 Jan 2024 08:26:04 +0900 Subject: [PATCH 02/12] chap12 --- yuta/chapter12/README.md | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 yuta/chapter12/README.md diff --git a/yuta/chapter12/README.md b/yuta/chapter12/README.md new file mode 100644 index 0000000..28fa469 --- /dev/null +++ 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 ( + + {status === 'pending' ? ( + <> + Pending + + + ) : null} + {status === 'paid' ? ( + <> + Paid + + + ) : null} + + ); +} + +``` \ No newline at end of file From f00aa31029824456c2143270fc586a58d8a1f95f Mon Sep 17 00:00:00 2001 From: yumarun Date: Tue, 23 Jan 2024 08:44:13 +0900 Subject: [PATCH 03/12] chap13 --- yuta/chapter13/README.md | 45 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 yuta/chapter13/README.md diff --git a/yuta/chapter13/README.md b/yuta/chapter13/README.md new file mode 100644 index 0000000..28bf728 --- /dev/null +++ b/yuta/chapter13/README.md @@ -0,0 +1,45 @@ +# Chapter 13 font, image + +## fontをグローバル変更 +layout.tsxで以下のように指定 +```ts + + {children} + +``` + +## fontを部分的に適応 +特定のコンポーネントの中のdivのclassNameを指定 +```ts +return ( +
+ +

Acme

+
+ ); +``` + +## 画像の追加 +- Imageコンポーネントを使用 + +```ts +
+ {/* Add Hero Images Here */} + Screenshots of the dashboard project showing desktop version + Screenshot of the dashboard project showing mobile version +
+``` \ No newline at end of file From 3eb03ca93e017ffc9784c9dc38b68d5c2e1bcfc2 Mon Sep 17 00:00:00 2001 From: yumarun Date: Tue, 23 Jan 2024 09:20:45 +0900 Subject: [PATCH 04/12] chap14 --- yuta/chapter14/README.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 yuta/chapter14/README.md diff --git a/yuta/chapter14/README.md b/yuta/chapter14/README.md new file mode 100644 index 0000000..92239c1 --- /dev/null +++ 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 ( +
+
+ +
+
{children}
+
+ ); +} +``` + From af957aa11ec32c95a0585c1e6ecd6d7591110847 Mon Sep 17 00:00:00 2001 From: yumarun Date: Tue, 23 Jan 2024 09:45:25 +0900 Subject: [PATCH 05/12] chap15 --- yuta/chapter15/README.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 yuta/chapter15/README.md diff --git a/yuta/chapter15/README.md b/yuta/chapter15/README.md new file mode 100644 index 0000000..51b8718 --- /dev/null +++ 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, + }, +)} +``` From c6a03bb90dafcd153ef59a12d85928cf4b0e8712 Mon Sep 17 00:00:00 2001 From: yumarun Date: Tue, 23 Jan 2024 10:37:42 +0900 Subject: [PATCH 06/12] chap16 --- yuta/chapter16/README.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 yuta/chapter16/README.md diff --git a/yuta/chapter16/README.md b/yuta/chapter16/README.md new file mode 100644 index 0000000..85c3136 --- /dev/null +++ b/yuta/chapter16/README.md @@ -0,0 +1,3 @@ +# Chapter 16 + +データベースをセットアップした From e185eb641e9bc2f8a10ce00245ee565b9a0ac8ff Mon Sep 17 00:00:00 2001 From: yumarun Date: Tue, 23 Jan 2024 11:25:43 +0900 Subject: [PATCH 07/12] chap17 --- yuta/chapter17/README.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 yuta/chapter17/README.md diff --git a/yuta/chapter17/README.md b/yuta/chapter17/README.md new file mode 100644 index 0000000..f6355ff --- /dev/null +++ b/yuta/chapter17/README.md @@ -0,0 +1,3 @@ +# Chapter 17 + +データのfetch \ No newline at end of file From 5a629eeeaeb06567cd8fa83c7e377358b73b7e46 Mon Sep 17 00:00:00 2001 From: yumarun Date: Tue, 23 Jan 2024 12:09:15 +0900 Subject: [PATCH 08/12] chap18 --- yuta/chapter18/README.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 yuta/chapter18/README.md diff --git a/yuta/chapter18/README.md b/yuta/chapter18/README.md new file mode 100644 index 0000000..8d17bfc --- /dev/null +++ b/yuta/chapter18/README.md @@ -0,0 +1 @@ +# Chapter 18 動的レンダリング・静的レンダリング \ No newline at end of file From 16812a67925567d971485beb5bce45981b1f0e15 Mon Sep 17 00:00:00 2001 From: yumarun Date: Tue, 23 Jan 2024 14:44:25 +0900 Subject: [PATCH 09/12] chp19 --- yuta/chapter19/README.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 yuta/chapter19/README.md diff --git a/yuta/chapter19/README.md b/yuta/chapter19/README.md new file mode 100644 index 0000000..226cd11 --- /dev/null +++ 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 +}> + + +``` + + From cddafae8f0a6f1fc22510f9965187b7d744b06f8 Mon Sep 17 00:00:00 2001 From: yumarun Date: Tue, 23 Jan 2024 14:51:22 +0900 Subject: [PATCH 10/12] chp20 --- yuta/chapter20/README.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 yuta/chapter20/README.md diff --git a/yuta/chapter20/README.md b/yuta/chapter20/README.md new file mode 100644 index 0000000..c95e940 --- /dev/null +++ b/yuta/chapter20/README.md @@ -0,0 +1,5 @@ +# Chapter 20 partial-prerendering(仮) + +- js関数に noStore() を追加することで関数をdynamicに + +- \ No newline at end of file From 74eee31e15fad95443b229d79af4208cfc41620e Mon Sep 17 00:00:00 2001 From: yumarun Date: Tue, 23 Jan 2024 15:44:37 +0900 Subject: [PATCH 11/12] chap21 --- yuta/chapter21/README.md | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 yuta/chapter21/README.md diff --git a/yuta/chapter21/README.md b/yuta/chapter21/README.md new file mode 100644 index 0000000..680d19b --- /dev/null +++ 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 +- すべてのキーストロークでなく、ユーザが入力を止めた時点でのキーストロークのみを取得 + +## ページネーション: 取得データの数に合わせてページを作成 \ No newline at end of file From a681bb3f2279381030b6fd7e4a30d3b6cf22f0db Mon Sep 17 00:00:00 2001 From: yumarun Date: Wed, 24 Jan 2024 06:44:18 +0900 Subject: [PATCH 12/12] chap22 --- yuta/chapter22/README.md | 61 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 yuta/chapter22/README.md diff --git a/yuta/chapter22/README.md b/yuta/chapter22/README.md new file mode 100644 index 0000000..7e86bee --- /dev/null +++ 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の作成・更新・削除を実装した。 + +