Todoアプリ

ARAYA
Webエンジニア
OVERVIEW

Todoアプリ 会員登録とTodo管理が可能。 電話番号管理アプリを作成中、現場Todoアプリ.. さっぱりした作りだが最新のNext.jsの技術を使用しているため高速で無駄なレンダリングがない。

YEAR 2023

https://healthy-app-omega.vercel.app/

新規登録可能ですが確認用ユーザ↓

user: user1@test.com

pass: 1234qwer

# 技術

  • Node 16.17.0
  • フロントエンド
    • Next.js ^13.0.6 (Appディレクトリ構成)
    • React 18.2.0
    • TypeScript 4.8.4
  • バックエンド
    • Supabase ^1.15.1
    • TypeScript 4.9.5
  • データベース
    • Supabase (BaaS)
  • その他
    • Tailwind CSS
    • NextAuth
    • ChatGPT
    • zustand 状態管理

Next.js 13のキャッチアップが目的

  • Nested Layout
    • 共通部分をまとめたレイアウトを階層毎に作成し設定することができる。画面遷移しても再レンダリングしないためHeaderやFooterなどに向いている。
  • Sever componentとClient componentの使用方法確認
    • 基本SSで作成し、Hooksなどはクライアントで使用するためCCで作成する。
  • Dynamic segmentとgenerate Static Params
    • これまでのgetStaticParamsの代わり(pages/id/[...id.tsx]→app/auth/mypage/[userId]/page.tsx
  • Re-renderring by router refresh (Mutation)
    • Todoアプリで使用
      • データが更新されたときに最新の値をServerComponentからfetchしてレンダリングしなおす。headerなどのレンダリングはしないため早い。


WEBSITE