next-todo

Next.jsを用いた Todo リスト管理のサンプルアプリケーション nuxt-todoのNuxt.js での実装

Demo: https://next-todo.netlify.com

特徴

機能は Todo アイテムの 追加 と 削除 及び 完了トグル
コンポーネント間通信方法の実装例として、削除時の確認用 モーダルダイアログ の実装を行った。
全てFunction Componentとして実装しステート管理は React Hooks を利用して行っている。
LocalStorageにデータを永続化している

その他

Nuxt.jsのサンプルとしての立ち位置を重視しTypeScriptは導入せず、Vanilla Next.jsでの実装とした。
スタイル定義にBulmaを利用している
デモサイトのデプロイにNetlifyを利用している
CI/CD にGitHub Actionsを利用している

クローン

git clone git@github.com:nemolize/next-todo.git && cd next-todo

ビルド

# 依存関係のインストール
$ yarn

# localhost:3000 で起動
$ yarn dev

# ビルドして静的ファイルにエクスポート
$ yarn build

デプロイ

npx now out