Next Admin options parameter

This is the documentation for the latest version of Next Admin. If you are using an older version (<5.0.0), please refer to the documentation

Next Admin options is a parameter that allows you to configure your admin panel to your needs.

Example:

import { NextAdminOptions } from "@premieroctet/next-admin";
 
export const options: NextAdminOptions = {
  title: "⚡️ My Admin Page",
  model: {
    /* Your model configuration here */
  },
  pages: {
    "/custom": {
      title: "Custom page",
      icon: "AdjustmentsHorizontalIcon",
    },
  },
  externalLinks: [
    {
      label: "App Router",
      url: "/",
    },
  ],
  sidebar: {
    groups: [
      {
        title: "Users",
        className: " bg-green-600 p-2 rounded-md", // group title extra classes. (optional)
        models: ["User"],
      },
      {
        title: "Categories",
        models: ["Category"],
      },
    ],
  },
};

It is recommended to centralize your options in a single file, as it might be used in multiple places.

`title`

The title property is a string that represents the title of the admin dashboard. It is displayed in the sidebar. By default, it is set to "Admin".

`model`

model is a property that allows you to configure everything about how your models, their fields, their relations are displayed and edited. It's highly configurable you can learn more about it here.

`pages`

pages is an object that allows you to add your own sub-pages as a sidebar menu entry. It is an object where the key is the path (without the base path) and the value is an object with the following properties:

Name	Type	Description
title	String	The title of the page displayed on the sidebar
icon	String	The outline HeroIcon name (opens in a new tab) of the page displayed on the sidebar

`sidebar`

The sidebar property allows you to customize the aspect of the sidebar menu. It is an object that can have the following properties:

Name	Type	Description
groups	Array	an array of objects that creates groups for specific resources
groups[].title	String	the name of the group
groups[].models	Array	the model names to display in the group

`externalLinks`

The externalLinks property allows you to add external links to the sidebar menu. It is an array of objects that can have the following properties:

Name	Type	Description
label	String	the label of the link displayed on the sidebar. This is mandatory
url	String	the URL of the link. This is mandatory

`defaultColorScheme`

The defaultColorScheme property defines a default color palette between light, dark and system, but allows the user to modify it. Default to system.

`forceColorScheme`

Identical to defaultColorScheme but does not allow the user to change it.

Here is an example of using NextAdminOptions for the following schema :

// prisma/schema.prisma
enum Role {
  USER
  ADMIN
}
 
model User {
  id        Int      @id @default(autoincrement())
  email     String   @unique
  name      String?
  password  String   @default("")
  posts     Post[]   @relation("author") // One-to-many relation
  profile   Profile? @relation("profile") // One-to-one relation
  birthDate DateTime?
  createdAt DateTime @default(now())
  updatedAt DateTime @default(now()) @updatedAt
  role      Role     @default(USER)
}

// pages/api/admin/options.ts
export const options: NextAdminOptions = {
  basePath: "/admin",
  model: {
    User: {
      toString: (user) => `${user.name} (${user.email})`,
      list: {
        display: ["id", "name", "email", "posts", "role", "birthDate"],
        search: ["name", "email"],
        fields: {
          role: {
            formatter: (role) => {
              return <strong>{role.toString()}</strong>;
            },
          },
          birthDate: {
            formatter: (date) => {
              return new Date(date as unknown as string)
                ?.toLocaleString()
                .split(" ")[0];
            },
          },
        },
      },
      edit: {
        display: ["id", "name", "email", "posts", "role", "birthDate"],
        fields: {
          email: {
            validate: (email) => email.includes("@") || "Invalid email",
          },
          birthDate: {
            format: "date",
          },
          avatar: {
            format: "file",
            handler: {
              upload: async (buffer, infos) => {
                return "https://www.gravatar.com/avatar/00000000000000000000000000000000";
              },
            },
          },
        },
      },
    },
  },
};

<NextAdmin/>Model configuration