API

Functions

Authentication

// app/admin/[[...nextadmin]]/page.tsx
 
export default async function AdminPage({
  params,
  searchParams,
}: {
  params: { [key: string]: string[] };
  searchParams: { [key: string]: string | string[] | undefined } | undefined;
}) {
  const session = await getServerSession(authOptions);
  const isAdmin = session?.user?.role === "SUPERADMIN"; // your role check
 
  if (!isAdmin) {
    redirect('/', { permanent: false })
  }
 
  const props = await getPropsFromParams({
    params: params.nextadmin,
    searchParams,
    options,
    prisma,
    schema,
    action: submitFormAction,
  });
 
  return <NextAdmin {...props} dashboard={Dashboard} />;
}

<NextAdmin /> component

<NextAdmin /> is a React component that contains the entire UI of Next Admin. It can take several props:

• AdminComponentProps, which are passed by the router function via getServerSideProps
• options used to customize the UI, like field formatters for example. Do not use with App router.
• dashboard used to customize the rendered dashboard
• translations used to customize some of the texts displayed in the UI. See i18n for more details.
• user used to add some user information at the bottom of the menu. See user properties for more details.

⚠️ : Do not override these AdminComponentProps props, they are used internally by Next Admin.

This is an example of using the NextAdmin component with a custom Dashboard component and options:

// pages/admin/[[...nextadmin]].tsx
import Dashboard from "../../components/CustomDashboard";
 
export default function Admin(props: AdminComponentProps) {
  /* Props are passed from the nextAdminRouter function via getServerSideProps */
  return (
    <NextAdmin
      {...props}
      dashboard={Dashboard}
      options={{
        model: {
          User: {
            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];
                  },
                },
              },
            },
          },
        },
      }}
    />
  );
}

Next Admin Options

Next Admin options is the third parameter of the router function and it's an object of options that has the following properties:

basePath

basePath is a string that represents the base path of your admin. (e.g. /admin) - optional.

model

model is an object that represents the customization options for each model in your schema.

It takes as key a model name of your schema as value an object to customize your it.

By default if no models are defined, they will all be displayed in the admin. If you want more control, you have to define each model individually as empty objects or with the following properties:

You can customize the following for each model:

• list property

This property determines how your data is displayed in the List View

Note that the search property is only available for scalar fields.

• edit property

This property determines how your data is displayed in the edit view

styles property

The styles property is available in the edit property.

⚠️ If your options are defined in a separate file, make sure to add the path to the content property of the tailwind.config.js file

Here is an example of using styles property:

styles: {
  _form: "form-classname",
  ... // all fields
};

fields property

The fields property is available in both list and edit properties.

For the list property, it can take the following:

For the edit property, it can take the following:

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:

actions property

The actions property is an array of objects that allows you to define a set of actions that can be executed on one or more records of the resource. On the list view, there is a default action for deletion. The object can take the following properties:

sidebar property

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

externalLinks property

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

defaultColorScheme property

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

forceColorScheme property

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/[[...nextadmin]].ts
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 (file: Buffer) => {
                return "https://www.gravatar.com/avatar/00000000000000000000000000000000";
              },
            },
          },
        },
      },
    },
  },
};
 
const adminRouter = await nextAdminRouter(prisma, schema, options);

CustomInputProps

This is the type of the props that are passed to the custom input component:

NextAdmin Context

The NextAdmin context is an object containing the following properties:

• locale: the locale used by the calling page. (refers to the accept-language header).

Notice

The edit page's form can display notice alerts. To do so, you can pass objects in the display array of the edit property of a model. This object takes the following properties :

User properties

The user property is an object that can take the following properties: