前回は FastAPI を使って、ログイン機能付きのAPIサーバーを作りました。
今回はその続き、Next.js を使って実際に動くタスク管理アプリのフロントエンドを作っていきます！

✅ ログイン・新規登録画面の作成
✅ JWTを使った認証処理の実装
✅ タスクの一覧表示・追加・削除のAPI連携

などなど、「APIをどうやってフロントエンドから使うのか？」という超実践的な内容を、初心者にもわかりやすく丁寧に解説していきます！

「ログイン状態ってどう管理するの？」「画面とAPIってどうつなぐの？」といった疑問も、コードを追いながら一緒に解決していきましょう！

Tailwind CSSで見た目も整えていくので、動くだけじゃない、見た目もちゃんとしたアプリになりますよ！

Azure・FastAPI・Next.js・PostgreSQL というモダンな構成で、
「自分にもこんなWebアプリ作れるんだ！」という成功体験、ぜひ体験してください💪

【Next.js入門】認証付きTask管理アプリを作りながら学ぶモダンなフロントエンド開発

概要

セットアップ

型定義

スピナーコンポーネントの実装

レイアウトコンポーネントの実装

ログイン画面の実装

タスク一覧画面の実装

タスク追加画面の実装

タスク詳細・編集画面の実装

リダイレクト処理

ユーザー一覧画面の実装

ユーザー追加画面を実装

ユーザー詳細・編集画面を実装

ローカルで動作確認

デプロイ

ボーナスレクチャー

azure

nextjs

typescript

tailwindcss

フロントエンド

React・TypeScriptでTodoアプリを作成しよう

ケン吉

記事投稿コンテスト「TypeScriptでやってみた挑戦・学び・工夫」