Help us understand the problem. What is going on with this article?

next.jsで睡眠時間記録webアプリを作りました

作ったもの

https://sleepkun.now.sh/

起きた時間と寝た時間を記録するだけのwebアプリケーション「sleepkun」を作りました。
データはIndexedDBに保存するようになっています。
firebaseの方が複数端末で使えるかなと思ったりしましたが、やる気の関係で見送りました。

image.png

リポジトリ

リポジトリはこちら。
https://github.com/lisp719/sleepkun

作業風景

30分くらいの動画です。

next.jsで睡眠時間記録webアプリを作る

便利だったもの

next.js

sleepkunにはSSRもrouterも要らないのですが、reactのプロジェクトを作る際に楽なので採用しています。
簡単なアプリなのでreduxなどは使わずreact hooksで状態を管理しています。
後述のnowを使う際はnext.jsを使い、firebaseを使う際はAngularを使うといった感じで使い分けることが多いです。

dexie

IndexedDBのwrapperライブラリです。
こんな感じでDBを定義して使います。
++idでオートインクリメントしてくれます。

const db = new Dexie("sleepkunDB");

db.version(1).stores({
  logs: "++id, label, timestamp"
});

db.table("logs").add(obj)

dayjs

日付を扱うのに使いました。
moment.jsの軽量版(2KB)といった感じです。

dayjs(log.timestamp).format("YYYY-MM-DD HH:mm")

now

デプロイ先。
next.jsを作ったzeitがやっているサービスです。
next.jsを使う時はだいたいnowへデプロイしています。
無料で使えたり、設定ファイルを書かなくてもnext.jsのSSRができたり便利です。

figma

ブラウザで使えるデザインツール。
画面を考えるときに使いました。

まとめ

next.jsとnowの組み合わせがめっちゃ便利。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away