Next.jsの初学者向けチュートリアルコンテンツです。タスク管理アプリを Next.js 及び TypeScript で開発していきます。シンプルでモダンなUIに、優先度・重要フラグ、タグ情報、テーマ変更なども付加した、実用性の高いアプリとなっています。
入力したメモ情報の格納には、BaaS（Backend as a Service）であるSupabaseを利用します。Supabaseとの連携は、Next.jsの Server Actions を利用します。またDBスキーマの作成には、ORMと呼ばれるものとしてPrismaを利用しています。ORMは、直接SQLクエリを作成することなく、データベース操作を行えるようにするものです。
Next.js・ReactによるモダンUIの構築、クライアントコンポーネントからサーバーコンポーネントの実装までフルスタック型の開発を体得出来ます。

Next.js + Supabase タスク管理アプリ

はじめに

環境準備

ベースレイアウト作成

フィルタリング機能

ヘッダー・タスクアイテム

タスク作成・編集・削除

タグ作成・編集・削除

Supabase 設定

データ取得

データ作成

データ更新

データ削除

GitHub、Vercel連携

nextjs

react

typescript

tailwindcss

supabase

bauhaus