Chapter 01

はじめに

Thirosue
Thirosue
2021.08.28に更新

Next.jsで管理画面のサンプルを作成しましたので、利用した技術などを紹介していきます。

作成したものは以下です。

https://next-typescript-sample-mu.vercel.app/login
  • デモユーザ
name password
test@example.com Password1?

APIはモックになってますので、更新を含めて全ての動作のご確認が可能です。

ソースコードは以下です。

https://github.com/Thirosue/next-typescript-sample

機能一覧

以下の機能などをサンプル実装しています。

名前 補足
認証 ユーザ認証、要認証画面の閲覧制御など
オートログイン
状態管理 画面状態の管理、強制リロード対応など
一覧表示・ページング
フォーム 更新フォーム、バリデーションなど
キャッシュ制御 API応答のキャッシュなど
トースト表示
ダイアログ表示
コンポーネント管理 Atomic Design、レイアウト制御など
アニメーション ローディングアイコンなど

フロント実装

以下のライブラリなどを利用して、画面を作成しました。

名前 補足
Next.js
TypeScript
React Hook Form フォームライブラリ
yup バリデーションライブラリ
React Query 非同期処理ライブラリ
tailwindcss CSSユーティリティ
React Toastify トースト表示
nookies Cookie用ヘルパー

バックエンド実装

VercelのServerless Functionsを利用し、認証などのモックを用意しました。

https://vercel.com/docs/serverless-functions/introduction