他のフレームワークにも活かせそう。Webプログラミングの要素詰め合わせセットになっている。
React/Nextの記法的なところを除いてまとめる
Chapter1
- プロジェクト作成
- 作成用のコマンドがある
- フォルダ構造を理解する
- プレースホルダーを用意しておくと便利
- テスト用のデータ
- mockAPI.io
- データベースへのシード（初期データを入れる）
- TypeScript
-
型安全性を高める
-
Prismaというものを使うとより安全に型宣言できる
-
Chapter2
- グローバルスタイル
- 最上位コンポーネント
- ルートレイアウト
- Tailwind CSS
- クラス名を追加して要素をスタイリングできる
- CSSモジュール
- tailwindもCSSモジュールもどっちでもいい、どっちも同時に使える
- clsxはクラス名を切り替えるためのライブラリです
- そのほかのスタイリング
-
scss
-
CSS-in-JSライブラリ
-
Chapter3
-
フォントの最適化
-
累積レイアウトシフト
-
フォントは、フォールバックフォントかシステムフォントでレンダリングして、そのあとにカスタムフォントでレンダリング。
-
Next.jsはその辺を最適化してくれる。
- サーバーサイドにフォントファイルを保存
-
プライマリフォントを設定する
- セカンダリフォントを設定する
-
画像の最適化
- サイズが動的に変わる。
-
imgの代わりのImageコンポーネント
- webPとかに自動でしてくれる
-
WicthとHeightを設定するとレイアウトがずれにくくなる
Chapter4
-
ルーティング
- ファイルシステムルーティング
-
Page.tsxとLayout.tsx
-
layout.tsxは子フォルダにすべて影響する
-
部分レンダリング
-
ルートレイアウト
Chapter5
-
Linkコンポーネント
- aタグに置き換えていろいろな機能が追加されたもの
- ページを更新せずに移動できるようになる。
-
URLの値を読み込んで、どのページにいるかを認識する
-
clsxを使って条件分岐してクラスを変更できる
Chapter6
-
GitHubにプッシュ
-
Vercelにデプロイ
- 自動的に再デプロイ
-
PostgreSQLデータベース
- Vercelで用意できる
-
.envにPostgresのシークレットキーを入れる
- gitignoreを確認せよ
-
データベースのシード
Chapter7
-
データの取得
- API→クエリ→SQLコマンド
-
APIを使う理由
- データベースを直接公開しないようにするため
-
React Server Componentsを利用するとAPIを使わずに安全にデータベースクエリを使うことができる
-
サーバーコンポーネント
- Promiseをサポートして非同期にできる
-
SQLのSDKがある
-
リクエストウォーターフォール
-
Promise.allによって並列処理をする
Chapter8
-
静的レンダリングと動的レンダリング
-
静的レンダリングはビルド時にサーバーでレンダリングする
- CDNで高速化できる
- サーバーの負荷軽減、高速化、SEO対策などで有利
-
静的レンダリングは静的なコンテンツ・UIしかできない
-
動的レンダリングはリクエスト時にレンダリングする
- リアルタイムデータを扱えたり、ユーザー独自のコンテンツ、Cookieなどが扱えるようになる
-
動的レンダリングを利用すると、最も遅いデータフェッチに依存する
Chapter9
- チャンク？
- コンポーネントごとにロードする
- loading.tsxでロード中の代替画面を作れる
- ロードスケルトンはロード中のフォールバックです。
- ルートグループによって、そのディレクトリでしか有効にならないようにできる
- コンポーネントのストリーミング
- Suspenceというものを使う
- コンポーネントをグループ化することで、同時に読み込むことができる
- そうすると、逐次読み込みに比べて画面が崩れなくなる
- サスペンスの境界線をどこに置くのか
- とりあえず適当でいい
Learn Next.js: Streaming
Improve your application’s loading experience with streaming and loading skeletons.
https://nextjs.org/learn/dashboard-app/streaming#deciding-where-to-place-your-suspense-boundaries
Chapter10
-
Nextjsの機能、部分的プリレンダリング
-
簡単に言うと、コンポーネントについて、静的な部分を先にレンダリングできる。
-
Suspenseでラッピングすると自動でこの機能を使ってくれる
-
これまでにやったこと
-
サーバーとデータベースは近いところに置く
-
サーバーコンポーネントを使って、データベースを安全に保つ
-
SQLクエリでデータ転送量の最適化を行う
-
Promise.allで並列化をします
-
ストリーミングを実装し、ページを部分的に読み込むようにしました。
Chapter11
-
URL検索パラメータ
- ブックマークできたり共有できたり追跡できたり
-
デバウンス
- 関数が起動できる速度を変える
- 連打できないようにする
- use-debounce
-
ページネーション
Chapter12
-
サーバーアクションとサーバーコンポーネント・・・？
-
サーバーアクションを使うとAPIエンドポイントを作る必要がない
-
サーバーアクションを使って、入力チェックなどを行うことができる。
-
サーバーアクションを使うと、キャッシュを使って再検証ができる？
-
型検証ライブラリのZodを使うと楽ができる
8章
ダイナミックレンダリングとスタティックレンダリング
9章
- ローディングスケルトン
- (overview) はロードされない
- かっこは読み込まれないから
- 若干コードの間違いがある
- Props経由でロードするのではなく、コンポーネントで直接ローディングを書いてしまう方がいい。
10章
一旦サラッと読む
11章
URLクエリ
デバウンス