Next Admin

next-admin provides a customizable and turnkey admin dashboard for applications built with Next.js and powered by the Prisma ORM. It aims to simplify the development process by providing a turnkey admin system that can be easily integrated into your project.

https://next-admin.js.org

Features

• 💅 Customizable admin dashboard
• 💽 Database relationships management
• 👩🏻‍💻 User management (CRUD operations)
• 🎨 Dashboard widgets and customizable panels
• ⚛️ Integration with Prisma ORM
• 👔 Customizable list and form
• ⚙️ Supports App Router and Page Router

Installation

To install the library, run the following command:

yarn add @sse-ui/neadmin prisma-json-schema-generator

Documentation

For detailed documentation, please refer to the documentation.

Usage

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

1. Create an admin route in your Next.js application.
2. Add the file [[...nextadmin]].js to the pages/admin directory.
3. Export the NextAdmin component from the file.
4. Use getServerSideProps to pass the props from the nextAdminRouter to the NextAdmin component.

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)

Example

Here's a basic example of how to use the library:

App router

Set Next Admin server actions into your app:

// actions/nextadmin.ts
"use server";
import { ActionParams, ModelName } from "@sse-ui/neadmin";
import {
  deleteResourceItems,
  submitForm,
  searchPaginatedResource,
  SearchPaginatedResourceParams,
} from "@sse-ui/neadmin/dist/actions";
import { prisma } from "../prisma";
import { options } from "../options";

export const submitFormAction = async (
  params: ActionParams,
  formData: FormData
) => {
  return submitForm({ ...params, options, prisma }, formData);
};

export const deleteItem = async (
  model: ModelName,
  ids: string[] | number[]
) => {
  return deleteResourceItems(prisma, model, ids);
};

export const searchResource = async (
  actionParams: ActionParams,
  params: SearchPaginatedResourceParams
) => {
  return searchPaginatedResource({ ...actionParams, options, prisma }, params);
};

Then configure page.tsx

// app/admin/[[...nextadmin]]/page.tsx
import { NextAdmin } from "@sse-ui/neadmin";
import { getPropsFromParams } from "@sse-ui/neadmin/dist/appRouter";
import "@sse-ui/neadmin/dist/styles.css";
import Dashboard from "../../../components/Dashboard";
import { options } from "../../../options";
import { prisma } from "../../../prisma";
import schema from "../../../prisma/json-schema/json-schema.json"; // generated by prisma-json-schema-generator on yarn run prisma generate
import {
  submitFormAction,
  deleteItem,
  submitFormAction,
} from "../../../actions/nextadmin";

export default async function AdminPage({
  params,
  searchParams,
}: {
  params: { [key: string]: string[] };
  searchParams: { [key: string]: string | string[] | undefined } | undefined;
}) {
  const props = await getPropsFromParams({
    params: params.nextadmin,
    searchParams,
    options,
    prisma,
    schema,
    action: submitFormAction,
    deleteAction: deleteItem,
    searchPaginatedResourceAction: searchResource,
  });

  return <NextAdmin {...props} dashboard={Dashboard} />;
}

Page Router

import { PrismaClient } from "@prisma/client";
import schema from "./../../../prisma/json-schema/json-schema.json"; // generated by prisma-json-schema-generator on yarn run prisma generate
import "@sse-ui/neadmin/dist/styles.css";
import {
  AdminComponentProps,
  NextAdmin,
  NextAdminOptions,
} from "@sse-ui/neadmin";

const prisma = new PrismaClient();

export default function Admin(props: AdminComponentProps) {
  return <NextAdmin {...props} />;
}

export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
  const { nextAdminRouter } = await import(
    "@sse-ui/neadmin/dist/router"
  );

  const adminRouter = await nextAdminRouter(prisma, schema);
  return adminRouter.run(req, res) as Promise<
    GetServerSidePropsResult<{ [key: string]: any }>
  >;
};

Demonstration

You can find the library code in the next-admin repository.

Sponsors

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

License

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