Next.jsでサーバーアクションを使ってワードプレスの様なCMSアプリ(kiji)を作っています。
前回記事を投稿した時より大幅に機能追加や変更を行いました。
以下では主な機能追加と変更点を紹介します。
shadcn/ui(Tailwind CSS)からMUIに変更
shadcn/ui(Tailwind CSS)からMUIに変更しました。主な理由は以下の2つです。
- Tailwind CSSはcssに詳しい人向けで、cssの知識が浅いと使いづらい。
- 日本国内ではTailwind CSSよりもMUIを使っている案件の方が多い。
Tailwind CSSを使っているOSSが多かったので私もそれに見習って採用していましたが、国内での需要や実装のしやすさを考慮してMUIに変更しました。
Tailwind CSS特有のclassNameが長くなる問題も無くなってコードがスッキリしました。
ホームページのデザインはMUIのブログテンプレートをそのまま使っています。
react-hook-formからconformに変更
フォームの検証ライブラリをreact-hook-formからconformに変更しました。一部、react-hook-formを使ってますが、全フォームの1割以下です。
react-hook-formはクライアント側でしか使えませんが、conformを使うと、クライアント側のバリデーションも、サーバー側のバリデーションも簡単に実装できるため変更しました。
conformはまだマイナーなパッケージで採用しているプロジェクトは少ないと思います。
今後、react-hook-formがサーバー側でも使える様になったら乗り換えるかもしれません。
管理ページ(/admin)を追加
ログイン後、管理者のみが閲覧できる管理ページを追加しました。
投稿、カテゴリー、タグ、ユーザーの管理ができます。
投稿のフォームでは、セレクトボックスや、複数のタグを選択できるチェックボックスを使っています。テキストフィールドより実装がやや難しいですが実装できました。