Next.jsで管理画面を作る前に調べた話：AdminJSからnext-adminへ

本記事のサマリ

Next.jsで管理画面が必要になりそうな状況で調査を始めたところ、最初はAdminJSが良さそうに見えました。しかし詳しく調べてみると、Next.jsとの相性に課題があることが分かりました。その後の調査でnext-adminというライブラリを発見し、こちらの方がNext.jsには適していることが判明した経緯を整理します。

管理画面を作る、この永遠の課題

Next.jsでアプリを作っていると、どうしても管理画面が欲しくなる瞬間がありますよね。ユーザーデータを確認したり、投稿を削除したり、設定を変更したり...。最初は「後で作ろう」と思っていても、結局急ぎで必要になって、慌てて実装することになりがちです。

で、いざ作ろうとすると面倒なんですよね。テーブル表示一つとっても、ソート機能やページネーション、検索機能...と、気がつけば管理画面だけでかなりの工数を食ってしまいそうです。

まずは選択肢を整理してみる

手作りする場合

shadcn/uiやMantineあたりを使って自作することも考えました。

https://ui.shadcn.com/

https://mantine.dev/

これらは確かに素晴らしいUIライブラリなんですが、本格的に作り始めると...データテーブル、フィルタリング、フォーム、バリデーション...と、結局想像以上に時間がかかりそうです。

SaaSという手もあるが

StrapiやSanity、Retoolといったサービスもあります。

https://strapi.io/

https://www.sanity.io/

https://retool.com/

これらは本当に強力ですが、個人開発や小規模なプロジェクトだと月額料金が気になるところです。

AdminJSを発見、これは良さそう！

そんなときに見つけたのがAdminJSでした。

https://adminjs.co/

オープンソースで、データベースから自動で管理画面を生成してくれるライブラリです。PrismaやSequelizeといった主要なORMに対応していて、「これは良さそう！」と思いました。

https://docs.adminjs.co/installation/adapters

コミュニティ製のアダプターもあって、Drizzle ORMなんかも使えるみたいです。

https://github.com/makuko/adminjs-drizzle

しかし、詳しく調べてみると...

AdminJSのドキュメントを読み進めていくうちに、気になることが出てきました。使用例を見ると、どれもExpress.jsベースなんですよね。

import AdminJSExpress from '@adminjs/express'
import express from 'express'

const adminRouter = AdminJSExpress.buildRouter(admin)
const app = express()
app.use(admin.options.rootPath, adminRouter)

「あれ、これNext.jsのApp Routerとかと相性良くないかも？」と思い始めました。AdminJSは従来のNode.js + Expressの環境を想定して作られていて、Next.jsの仕組み（特にApp Router）とは少しズレがありそうです。

API Routesで無理やり動かすことはできそうですが、なんだかNext.jsらしくない感じが...。

再調査：next-adminという選択肢

「Next.js専用の管理画面ライブラリってないのかな？」と思って調べ直したところ、next-adminというライブラリを見つけました。

https://github.com/premieroctet/next-admin

https://next-admin-docs.vercel.app/

名前からして「これNext.js専用っぽい！」と思って詳しく調べてみると...これが正解でした✨

next-adminの何が良いのか

Next.js専用設計

next-adminはNext.jsのために作られているので、App RouterとPages Router両方に対応しています。catch-allルーティングを使って、こんな感じでセットアップするみたいです：

app/admin/[[...nextadmin]]/page.tsx
app/api/[[...nextadmin]]/route.ts

これは本当にNext.jsらしい！AdminJSのように「Expressをラップしてどうにか動かす」みたいなハック感がありません。

Prismaとの統合が自然

Prismaのスキーマに generator を追加するだけで、型安全な管理画面が生成されます：

generator jsonSchema {
  provider = "prisma-json-schema-generator"
  includeRequiredFields = true
}

TypeScript対応も完璧で、型推論がちゃんと効くのも嬉しいところです。

カスタマイズ性も申し分なし

NextAdminOptionsという設定オブジェクトで、かなり柔軟にカスタマイズできそうです：

export const options: NextAdminOptions = {
  title: "My Admin Page",
  model: {
    User: {
      toString: (user) => `${user.name} (${user.email})`,
      title: "Users",
      icon: "UsersIcon",
      list: {
        search: ["name", "email"],
        filters: [
          {
            name: "is Admin",
            active: false,
            value: {
              role: {
                equals: "ADMIN",
              },
            },
          },
        ],
      },
    },
  },
  sidebar: {
    groups: [
      {
        title: "Users",
        models: ["User"],
      },
    ],
  },
};

検索機能やフィルタリング、カスタムページの追加なんかも簡単にできそうです。

国際化対応も

i18n対応も組み込まれているので、多言語対応が必要な場合も安心です。

デモも充実

実際に動いているデモも見ることができます：

https://next-admin-po.vercel.app/

これを見る限り、UIも洗練されていて、実用的なレベルに達していそうです👍

AdminJSとnext-admin、どう違う？

AdminJSは汎用的なNode.js向けライブラリとして設計されているので、Express、Fastify、Koaなど様々な環境で使えます。一方で、Next.jsで使う場合は少し無理がある感じがしました。

next-adminはNext.js専用なので、その分Next.jsの機能をフルに活用できています。App Router、API Routes、TypeScriptサポートなど、Next.jsの良さを最大限引き出している印象です。

どんなときに使えそうか

next-adminは以下のような場面で活躍しそうです：

Next.jsでプロジェクトを進めていて、管理画面が必要になった場合。特にPrismaを使っている場合は、本当に数分でセットアップできそうです。

型安全性を重視する開発チームなら、TypeScript完全対応は大きなメリットになるでしょう。

国際化が必要なプロジェクトでも、i18n対応が最初から組み込まれているので安心です。

まとめ：技術選択の大切さ

最初はAdminJSが良さそうに見えたんですが、詳しく調べてみるとNext.jsとの相性に課題がありました。でも、そのおかげでnext-adminという、より適切な選択肢を見つけることができました。

技術選択って、最初の印象だけで決めちゃダメですね。ちゃんと深掘りして調べることの大切さを改めて感じました。

next-adminはNext.js専用に設計されているだけあって、セットアップから機能まで、本当にNext.jsらしい作りになっています。これなら安心して導入できそうです。

次回は実際にnext-adminを使って、管理画面を構築してみようと思います。Prismaとの連携や、カスタマイズ方法なんかを実際に試してみる予定です。

---

参考：

• next-admin: https://github.com/premieroctet/next-admin
• next-admin docs: https://next-admin-docs.vercel.app/
• AdminJS: https://adminjs.co/