Скачать или смотреть [2025年版]Webアプリ開発基礎編 / Next.js, Drizzle, Supabase, Better Auth, Storybook, Playwright, shadcn/ui

最新の技術を使い、実際にWebアプリを開発しながら解説します。認証、CRUD、検索といった主要機能を含めているので、仕組みを理解すれば応用でさまざまなアプリを構築できます。

🔒 ソースコード（メンバー限定）
https://github.com/nino-plus/basic-app

🚀 nino+ / 学習コミュニティ & メンターサービス
https://nino.plus

🏷️ 期間限定10%OFFクーポン配布中！
LYEZDNJI

💬 Discord コミュニティ
  / discord  

チャプター
0:00 イントロ
0:55 Next.jsのセットアップ
1:35 実装する機能の概要
2:45 shadcn/ui のセットアップ
3:45 shadcn MCP の導入
4:18 Supabaseのセットアップ
5:53 Drizzleのセットアップ
10:49 Better Auth のセットアップ
44:12 AGENTS.mdの作成とコミットの解説
50:57 middlewareのパス設定とローカルサーバーの起動
55:34 レイアウトの実装
1:05:52 metadataの実装
1:09:01 ログイン画面とログイン機能の実装
1:28:29 マイページとユーザーカードの実装
1:50:24 ペットスキーマと型の作成
2:03:16 ペット一覧画面の実装
2:11:03 モックアバターとテキストの装飾
2:18:50 フォーム値検証スキーマの作成
2:26:01 ペット作成、編集、削除用Server Actions 実装
2:40:56 フォームの実装
2:58:36 ペットデータ取得&一覧表示
3:11:24 単体テストとストーリーブックの意義
3:16:48 ストーリブックの導入と実装
3:34:32 編集画面と編集フォームの実装
3:42:56 削除ボタンの実装
3:47:55 画面の保護、認証状態に応じた表示切り替え
3:56:44 検索フォームと検索機能
4:11:51 OG Image, Favicon
4:17:11 Drizzle Seed によるシードデータ追加
4:25:33 Playwright による e2eテスト
4:49:52 Playwright / 認証状態の共有
4:57:32 Playwright でテスト時にデータをリセットする
5:03:46 ボーナス: wrap-anywhere による文字貫通防止
5:06:28 ボーナス: ロジックの単体テスト
5:11:35 宣伝

//////////////////////////////////////////////////////////////////////////////

𝕏
https://x.com/d151005

Discord
  / discord