タスクリマインダー – Next.js(Server Actions)/Mantine UI/framer-motion/localStorage

テンプレート

まえがき

本テンプレートのコードは自由にご利用いただけます。

少しでもプラスになれば筆者もうれしいです。

テンプレート紹介

本テンプレートは リマインダー機能を備えたタスクを管理するサイトです。

モダンなUI や タスクの追加・編集・削除、期日管理、フィルタリング・ソート、設定機能 を確認できます。

デモサイトURL

タスクリマインダー - Task Reminder
期日管理とリマインダー機能を備えたタスク管理アプリ
task-reminder-sigma.vercel.app

画面レイアウト

トップ画面（初期表示）

トップ画面（タスク追加後）

タスク編集画面

トースト表示（更新時）

設定画面

技術スタック

  • Framework: Next.js 16
  • Language: TypeScript 5
  • UI Library: Mantine UI 7
  • Backend: Next.js Server Actions、localStorage
  • Utilities:
    • Date: dayjs
    • Animation: framer-motion
    • Icons: Tabler Icons React

GitHubリポジトリ

GitHub - xpendev/task-reminder
Contribute to xpendev/task-reminder development by creating an account on GitHub.
github.com

npm installとnpm run devのみで起動できます。

実装のポイント

3層アーキテクチャによる関心の分離

  • UI層（app/、components/）
  • ロジック層（actions/）
  • データ層（lib/localStorage.ts）
src/
  actions/              # ロジック層: Server Actionsによるバリデーションとサーバー側処理
    taskActions.ts
  app/                  # UI層: Next.js App Routerによる画面単位のルーティング
    layout.tsx          # 共通レイアウト、styles/globals.cssを読み込む
    page.tsx            # トップ画面
    settings/
      page.tsx          # 設定ページ
    task/
      [id]/
        page.tsx        # タスク編集画面
  components/           # UI層: 再利用可能なUIコンポーネント
    TaskForm.tsx        # タスク入力フォーム
    TaskItem.tsx        # タスクアイテム表示
  lib/                  # 共通機能: データ操作と型定義
    localStorage.ts     # データ層: localStorage操作（タスクのCRUD、設定の保存・取得）
    types.ts            # 型定義: TypeScript型定義（Task、Settings、FilterType等）
  styles/               # プロジェクト共通のグローバルスタイル
    globals.css

Server Actionsでのバリデーション

Server Actions（サーバーサイド）でのバリデーションを実装済み。クライアント側のJavaScriptが無効化されていても検証が機能する。

期日管理と視覚的な強調表示機能

  • dayjsで日付の判定とフォーマット
  • 期日間近・期限切れタスクをアニメーション（framer-motion）で強調表示
  • 設定画面で強調表示の有効/無効と、何日前から強調するかをカスタマイズ可能

こんな人におすすめ

  • Next.jsのApp RouterとServer Actionsを学習したい方
  • Mantine UIを使ったモダンなUI開発を体験したい方
  • タスク管理アプリの実装パターンを学びたい方
  • 3層アーキテクチャによる関心の分離を実践したい方

参考リンク

タイトルとURLをコピーしました