[Next.js & Firebase & Algolia] Webアプリ開発解説（プレビュー版）

長編動画が初めてなのでアップロード処理&ユーザーテストの観点から途中経過ですがアップロードしました。評価、再生数的に需要がありそうな場合続きを含めた本編をアップしようと思います。フィードバックや質問がありましたら気軽にお願いします。 ? チャプター 00:00 イントロ 02:21 Next.js インストール 07:35 Visual Studio Code の準備 14:02 Next.js のディレクトリ構造 15:38 TypeScript、JSX(TSX)とは 22:33 ページコンポーネント 24:58 汎用コンポーネント 41:00 Tailwind CSS インストール 48:27 children の役割 50:18 DRYの原則 52:25 Firebase プロジェクトの作成 53:53 Firebase の仕組み 01:03:07 Next.js と Firebase の連携 01:24:05 ログインの実装 01:36:23 Promiseとは 01:42:38 アカウント作成画面 01:47:03 React Hook Form によるフォーム作成 02:00:05 コンテナーの作成 02:03:26 フォームエラーの表示 02:08:05 classnamesの導入 02:13:23 入力文字数の表示 02:17:21 ログイン状態の取得 02:35:30 Firestoreにユーザー作成 02:47:58 ユーザーデータの取得 03:09:00 Algoliaの導入 03:25:50 記事投稿の実装 03:43:41 検索結果の表示 03:43:41 検索結果の表示 04:26:27 記事投稿者の取得 04:34:38 SWRの導入 04:45:05 文字の省略 04:50:30 動的ルートの実装 05:00:41 カスタムフックの作成 05:03:57 記事詳細画面の実装 05:07:59 SG(GetStaticProps)による通信コストの削減 05:31:48 On-demand ISR の実装 06:14:19 記事削除、編集機能 06:19:18 レイアウトの実装 06:53:00 ユーザーメニュードロップダウン 07:10:31 サイドバーの実装 07:35:00 プロフィール編集画面 07:39:09 アバター画像入力フォーム 08:25:50 画像のアップロード 08:45:27 ページ遷移時にサイドバーを閉じる 08:48:01 検索結果にアバターを表示 08:50:00 トップ画面（SG、記事一覧、ISR）の実装 09:06:28 カルーセルの実装 09:23:57 レイアウトのz-indexを調整する Twitter