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 @premieroctet/next-admin 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:
- Create an admin route in your Next.js application.
- Add the file
[[...nextadmin]].js
to the pages/admin
directory. - Export the
NextAdmin
component from the file. - 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
import { NextAdmin } from "@premieroctet/next-admin";
import { getPropsFromParams } from "@premieroctet/next-admin/dist/appRouter";
import "@premieroctet/next-admin/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";
import "../../../styles.css";
import { 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,
});
return <NextAdmin {...props} dashboard={Dashboard} />;
}
Page Router
import { PrismaClient } from "@prisma/client";
import schema from "./../../../prisma/json-schema/json-schema.json";
import "@premieroctet/next-admin/dist/styles.css";
import {
AdminComponentProps,
NextAdmin,
NextAdminOptions,
} from "@premieroctet/next-admin";
const prisma = new PrismaClient();
export default function Admin(props: AdminComponentProps) {
return <NextAdmin {...props} />;
}
export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
const { nextAdminRouter } = await import(
"@premieroctet/next-admin/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.
Also you can find a deployed version of the library here.
License
This library is open source and released under the MIT License.