Next.jsでCMSアプリを作ってみた 2

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)を追加

ログイン後、管理者のみが閲覧できる管理ページを追加しました。

投稿、カテゴリー、タグ、ユーザーの管理ができます。

投稿のフォームでは、セレクトボックスや、複数のタグを選択できるチェックボックスを使っています。テキストフィールドより実装がやや難しいですが実装できました。

スポンサーリンク
スポンサーリンク