Next Admin

Open-source admin panel for Next.js and Prisma

Documentation · Live demo · Getting started · Changelog

Next Admin turns your Prisma schema into a customizable admin dashboard and back-office for your app. It gives you list and edit views, relationship management, search, filters, CSV export and custom pages, and works with the Next.js App Router and Pages Router, Remix and TanStack Start.

Features

• 💅 Customizable admin dashboard
• 💽 Database relationships management
• 👩🏻‍💻 User management (CRUD operations)
• 🎨 Dashboard widgets and customizable panels
• ⚛️ Integration with Prisma ORM
• 👔 Customizable list and form
• ⚙️ Support for Next.js (App Router and Pages Router), Remix, TanStack Start
• 🚀 Support for any full stack framework

Installation

With the CLI

npx @premieroctet/next-admin-cli@latest init

Manually

To install the library, run the following command:

yarn add @premieroctet/next-admin @premieroctet/next-admin-generator-prisma

Documentation

For detailed documentation, please refer to the documentation.

Usage

To use the library in your Next.js application, follow these steps:

1. Add tailwind preset to your tailwind.config.js file - more details
2. Add json schema generator to your Prisma schema file - more details
3. Generate the schema with yarn run prisma generate
4. Create a catch-all segment page page.tsx in the app/admin/[[...nextadmin]] folder - more details
5. Create an catch-all API route route.ts in the app/api/[[...nextadmin]] folder - more details

Bonus: Customize the admin dashboard by passing the NextAdminOptions options to the router and customize the admin dashboard by passing dashboard props to NextAdmin component. (More details in the documentation)

What does it look like?

List view	Edit view

Everything is configured from a single options object:

// app/admin/options.ts
import { NextAdminOptions } from "@premieroctet/next-admin";

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

See the options reference and model configuration for everything you can customize.

Sponsors

This project is being developed by Premier Octet, a Web and mobile agency specializing in React and React Native developments.

License

This library is open source and released under the MIT License.